Next.js嵌套getStaticPaths如何获取父分类slug实现分类分页静态生成？

方案1：调整[pageNo].tsx的getStaticPaths逻辑，预生成全部分类的分页路径 #

Next.js Pages Router 中嵌套动态路由的getStaticPaths生成路径时，需要显式拼接所有层级的动态参数，你可以直接在该文件内先拉取全部分类的slug，再逐个生成分页路径：

export async function getStaticPaths() {
  // 1. 先拉取全部分类的slug，和[slug].tsx里的逻辑一致
  const allCategories = await GET_ALL_CATEGORIRS_SLUG();
  const allPaths = [];

  // 2. 遍历每个分类，单独查询该分类的总文章数，生成分页路径
  for (const { node } of allCategories.edges) {
    const currentCategorySlug = node.slug;
    const totalCount = await GET_TOTAL_POST_COUNT(currentCategorySlug);
    const totalPostsCount = totalCount.pageInfo.offsetPagination.total ?? 0;
    const pagesCount = Math.ceil(
      (totalPostsCount - PER_PAGE_FIRST) / PER_PAGE_REST + 1
    );

    // 生成当前分类下的所有分页路径
    const categoryPaths = new Array(pagesCount).fill("").map((_, index) => ({
      params: {
        slug: currentCategorySlug, // 必须传入父级动态参数slug
        pageNo: (index + 1).toString(),
      },
    }));
    allPaths.push(...categoryPaths);
  }

  return {
    paths: allPaths,
    fallback: true,
  };
}

同时你在[pageNo].tsx的getStaticProps中可以直接拿到所有层级的动态参数，不需要用useRouter：

export async function getStaticProps(context) {
  // params里包含所有层级的动态参数
  const { slug, pageNo } = context.params;
  // 用slug和pageNo拉取对应分类对应分页的文章数据即可
  const posts = await GET_CATEGORY_POSTS_BY_PAGE(slug, pageNo);
  return {
    props: {
      posts,
      currentPage: Number(pageNo),
      categorySlug: slug
    },
    revalidate: 86400 // 按需设置增量静态再生成时间
  }
}

方案2：减少构建时预生成路径，用fallback模式按需生成 #

如果你的分类数量多、分页量大，全量预生成会拖慢构建速度，可以把getStaticPaths的paths只返回热门分类的分页路径，剩下的路径开启fallback模式在首次访问时按需生成：

• 如果设置fallback: 'blocking'，首次访问时服务端会自动执行getStaticProps拉取数据生成页面并缓存，后续访问直接用缓存页，用户无感知
• 只有当你需要在客户端做未预生成路径的加载态处理时，才需要用useRouter判断isFallback状态，展示加载动画

注意事项 #

useRouter是客户端Hook，只在组件函数体内执行，getStaticPaths、getStaticProps都是服务端构建/请求阶段执行的方法，本身就不支持调用客户端Hook，不需要在这两个方法里尝试引入useRouter。

内容的提问来源于stack exchange，提问作者oscar