Next.js嵌套动态路由博客构建报错：getStaticPaths仅可用于动态页面

这个报错是Next.js Pages Router的规则校验不通过触发的，核心是getStaticPaths的使用位置和路由规则不匹配，具体触发原因有三类：

• 路由拼写错位导致Next.js无法建立正确的“代码-路由”映射。按照Pages Router的规则，你放在pages/articles/[category]/[slug].js的动态路由文件，对应的可访问路径是/articles/{分类}/{文章别名}（注意是复数形式的articles），但你页面里的Link跳转用的是单数形式的/article/${category}/${slug}。这种单复数的拼写差不会直接报“路由不存在”，反而会让Next.js在构建扫描时错乱，把你的getStaticPaths方法错误绑定到根路径/对应的首页静态路由上，直接触发“getStaticPaths只能在动态页面使用，不能用于/路径”的报错。
• 代码粘贴错位。日常复制代码片段时很容易把getStaticPaths的代码块误粘到首页文件pages/index.js里，而首页对应的路由是无任何动态参数的静态根路径，只要这个文件里被扫到getStaticPaths导出，Next.js就会立刻抛出这个报错。
• 动态路由文件命名不规范。如果你的动态路由文件没有用方括号标识动态参数（比如直接写了pages/articles/category/slug.js），那这个文件对应的就是纯静态路由，本身不支持使用getStaticPaths，也会触发同类报错。

按排查优先级一步步操作即可解决：

• 第一步：全局排查getStaticPaths的写入位置
  全项目搜索所有导出getStaticPaths的代码块，确认每一处的所在文件都是带方括号的动态路由文件（比如[category]/[slug].js）。如果发现代码被误粘到pages/index.js、pages/_app.js这类非动态页面文件里，直接把对应代码段剪切回正确的动态路由文件位置即可。
• 第二步：统一路由拼写的一致性
  核心原则是路由路径和pages目录结构逐字符完全匹配，没有绝对的对错要求：
  • 如果保留当前的pages/articles/[category]/[slug].js目录结构，就把Link的跳转路径从单数/article/${category}/${slug}修改为复数/articles/${category}/${slug}
  • 如果更习惯用单数的/article路径，就反过来把pages下的文件夹名从articles改成article
    别靠“差不多”的感觉写路径，差一个字母、一个单复数都可能触发路由映射错乱。
• 第三步：补全getStaticProps的参数匹配逻辑
  你目前写的getStaticProps是空注释状态，就算路由匹配正确，也需要给getStaticProps传入params参数，用来接收getStaticPaths返回的路由参数拉取对应博文内容，基础结构参考：

  export async function getStaticProps({ params }) {
    // 根据params里的分类、slug参数拉取对应博文的完整内容
    const postDetail = await fetchPostContent({
      category: params.category,
      slug: params.slug
    })
    return {
      props: { postDetail }
    }
  }
  

• 第四步：重新执行构建验证
  完成以上修改后，重新运行npm run build，Next.js会正确扫描到两层嵌套动态路由，把getStaticPaths绑定到对应的动态路由节点上，不会再出现方法错绑到根路径的问题。

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