Question

我将使其简单化：

链接：http://localhost:3000/product/bioCloths?activeCategory=medium&id=0

文件路径：pages/product/[product].js。

预期： product: "bioCloths, activeCategory: "medium", id: "0"

在getStaticProps使用[product].js：

const ProductDetails = (props) => {
  console.log("initial props", props);

  return <div>product details...</div>
};

export default ProductDetails;

export async function getStaticProps(context) {

  return {
    props: {
     context: context
    },
  };
}

export async function getStaticPaths() {
  return {
    paths: [{ params: { product: "1" } }, { params: { product: "2" } }],
    fallback: true,
  };
}

Props返回：context: params: product: "bioCloths"，不包括查询参数。

现在，如果我改用不推荐使用的getInitialProps：

ProductDetails.getInitialProps = (context) => {
  const activeCategory = context.query.activeCategory;
  const id = context.query.id;
  const product = context.query.product;

  return {
    activeCategory: activeCategory,
    id: id,
    product: product,
  };
};

道具日志activeCategory: "medium" id: "0" product: "bioCloths"

我需要获得所有这些道具，以便可以在客户端安装之前fetch进行数据

。

我知道getInitialProps已被弃用，但可以使用。为什么getStaticProps不起作用，我应该使用它而不是serverSideProps吗？

这是一个电子商务，因此我无法为getStaticPaths设置getStaticProps的数百种可能性，因此我想在这种情况下我应该使用getInitialProps or getServerSideProps ？

P.S-getServerSideProps给我打了个错误，指出它将仅接受.json个文件。

Answer 1

根据Nextjs的维护者之一，这是对学习此框架的任何人的答复：

getStaticProps在构建时生成页面。无法了解访问者可以在构建时使用的自定义查询参数。

getInitialProps和getServerSideProps可以知道所有可能的查询参数，因为只要您收到新请求，该页面都是在运行时生成的。

您可以详细了解上述here。

”

可以在Github

上阅读此讨论

为什么不能在```getStaticProps```中获取查询参数？

1 个答案: