Next.js动态SSG页面'/category/[...Id]'缺失getStaticPaths报错如何解决

你使用了Next.js的SSG（静态站点生成）能力搭配getStaticProps，同时当前页面是动态catch-all路由/category/[...Id]，Next.js要求这类动态SSG页面必须配套getStaticPaths方法，明确告知构建阶段需要预生成哪些路径的静态页面，否则就会抛出你遇到的报错。

在你的[...Id].js文件中，getStaticProps的上方/下方新增getStaticPaths导出即可，以下是两种常用场景的实现方案：

场景1：构建时预生成所有已知分类页面 #

如果你可以提前拿到全量的分类ID列表，推荐用这个方案，所有页面在构建阶段就生成好，访问速度最快：

// 新增的getStaticPaths代码，放在getStaticProps之前即可
export async function getStaticPaths() {
  // 这里调用你自己的接口查询全量分类ID，我这里用示例逻辑模拟
  const res = await fetch('你的全量分类查询接口地址')
  const categoryList = await res.json()

  // 构造路径数组，注意因为是[...Id] catch-all路由，Id必须是数组
  // 你的getStaticProps中取的是Id[1]作为category_id，所以数组第二个元素填分类ID即可
  const paths = categoryList.map(item => ({
    params: { Id: ['category', item.id.toString()] } // 这里的数组结构要和你实际路由路径匹配，比如路径是/category/cate/123，Id就是['cate','123']
  }))

  return {
    paths,
    fallback: false // 不在paths列表里的路径直接返回404
  }
}

场景2：分类数量多，不想构建时全量生成 #

如果你的分类数量非常多，构建时生成所有页面会导致构建时间过长，可以用fallback: 'blocking'模式：

export async function getStaticPaths() {
  // 可以只预生成热门分类的路径，也可以直接返回空数组
  return {
    paths: [],
    fallback: 'blocking' 
    // 访问未预生成的路径时，Next.js会在首次访问时服务端渲染页面并缓存，之后访问就和预生成的静态页面一样
  }
}

• 因为你用的是[...Id] catch-all动态路由，所以params中的Id必须是数组类型，不能传字符串，否则会触发参数格式错误
• 数组的结构要和你实际的路由路径完全匹配，比如你访问的路径是/category/electronics/5，那么Id数组就是['electronics', '5']，对应你getStaticProps里取Id[1]作为分类ID的逻辑是正确的

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