You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js中getStaticPaths如何获取动态分类参数生成分页路径

问题根因

getStaticPaths是构建阶段执行的API,作用是枚举所有需要预渲染的动态路由参数组合,执行时不存在用户访问请求,自然不可能从URL拿到动态分类参数。
你当前使用的是/[category]/[page]双层动态路由,getStaticPaths返回的路径必须同时包含category和page两个层级的参数,你之前只返回了page参数,本身就不符合路由规则,也无法按分类计算分页数量。
另外你的代码里分页计算逻辑不一致:统计总页数时按每页12条计算,实际拉取博客时又用每页2条,会导致分页路径和实际内容不匹配。

修复方案

核心逻辑是:在getStaticPaths中先获取所有博客分类,再逐个分类统计博客总数,计算每个分类对应的总页数,最后拼装所有合法的参数组合即可。
修正后的完整代码如下:

const PAGE_SIZE = 2; // 统一每页条数,避免前后计算不一致

export const getStaticPaths: GetStaticPaths = async () => {
  const paths: Array<{ params: { category: string; page: string } }> = [];

  // 拉取所有博客条目提取分类,如果分类是固定3个也可以直接硬编码为数组
  const allEntries = await client.getEntries({
    content_type: "blog",
    select: "fields.category",
    limit: 1000,
  });
  // 去重得到全部分类
  const categories = [...new Set(allEntries.items.map((item) => item.fields.category))];

  // 遍历每个分类,生成分页路径
  for (const category of categories) {
    const categoryRes = await client.getEntries({
      content_type: "blog",
      "fields.category": category,
      limit: 0, // 只获取总数,不拉取具体内容减少开销
    });
    const totalPages = Math.ceil(categoryRes.total / PAGE_SIZE);
    for (let pageNum = 1; pageNum <= totalPages; pageNum++) {
      paths.push({
        params: {
          category,
          page: `${pageNum}`,
        },
      });
    }
  }

  return {
    paths,
    fallback: "blocking",
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const { category, page } = params as { category: string; page: string };
  const currentPage = Number(page);
  const skip = (currentPage - 1) * PAGE_SIZE;

  const blogs = await client.getEntries({
    content_type: "blog",
    limit: PAGE_SIZE,
    skip,
    "fields.category": category,
  });

  return {
    props: {
      page: currentPage,
      blogs: blogs.items,
    },
    revalidate: 1,
  };
};
可选优化
  • 如果你明确知道3个分类的固定值,可以跳过拉取全量条目提取分类的步骤,直接定义分类数组即可,能减少构建时的接口请求:
    const categories = ["前端开发", "后端开发", "生活随笔"]; // 替换为你的实际分类值
    
  • 你当前配置的fallback: "blocking"和revalidate: 1已经开启了ISR增量静态再生,构建完成后如果分类下新增博客,新的分页路径会在用户首次访问时按需生成,不会出现404问题,也不需要重新全量构建站点。

内容的提问来源于stack exchange,提问作者Mehdi Faraji

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.29 07:45:35