NextJS动态路由：如何获取路径名及单产品静态生成数据？

在Next.js的getStaticProps中，你不需要用useRouter来获取动态路由参数——这个钩子是给客户端组件用的，而getStaticProps是在构建阶段（或增量静态再生时）在服务端运行的，它可以直接通过传入的context参数拿到动态路由的params。

直接修改你的getStaticProps代码即可：

export async function getStaticProps(context) {
  // 从context中提取动态路由的pid参数
  const { pid } = context.params;

  // 推荐：如果后端提供单个产品的接口，直接调用它（比全量获取更高效）
  // const productData = await getSingleProduct(pid);

  // 如果你只能获取全量产品列表，再做筛选
  const productCatalog = await getAllProducts();
  // 用find比filter更合适，找到第一个匹配项就停止
  const productData = productCatalog.find(product => product.id === pid);

  return {
    props: { productData }
  };
}

// 你的getStaticPaths代码可以保持不变
export async function getStaticPaths() {
  const productCatalog = await getAllProducts();
  const paths = productCatalog.map(product => ({
    params: { pid: product.id }
  }));

  return {
    paths,
    fallback: false
  };
}

关键注意点 #

• getStaticProps的第一个参数context里包含了当前页面的路由参数params，这就是你要的动态路径名称对应的pid
• 绝对不要在getStaticProps、getServerSideProps这类服务端/构建时运行的函数里使用客户端钩子（比如useRouter），它们只能在React组件内部使用
• 尽量优先使用单个产品的接口获取数据，避免每次都拉取全量产品列表，优化构建速度和资源占用

内容的提问来源于stack exchange，提问作者engineer-x