NextJS 13动态路由访问出现404错误，该如何排查解决？

以下是几个可能导致你访问/users/1出现404的原因及解决办法：

• 确认NextJS版本：确保你使用的是13.4及以上版本，早期13.x版本的App Router处于实验阶段，动态路由可能存在兼容性问题。可以通过npm list next查看当前版本，若版本过低，执行npm install next@latest升级。

• 检查根layout文件：App Router要求app目录下必须存在layout.tsx（或layout.jsx）文件，作为所有路由的根布局。如果缺失，会导致路由无法正常解析。示例根layout内容：

  export default function RootLayout({ children }) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    );
  }
  

• 验证文件夹命名：确保[id]文件夹使用的是英文半角方括号，避免使用全角符号或拼写错误（比如写成{id}或[ID]）。

• 重启开发服务：有时候缓存会导致路由更新不及时，停止next dev服务后重新启动，再访问/users/1试试。

• 检查路由嵌套逻辑：确认users目录下没有其他冲突的路由文件（比如page.tsx），避免路由匹配优先级问题。

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