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
相关产品推荐
相关产品推荐

