Next.js项目启动后浏览器报404错误，求排查建议

核心原因：路由模式混淆 #

Next.js 目前有两种独立的路由体系——Pages Router（旧版）和App Router（新版，Next.js 13+），两者的文件路径规则不兼容，你大概率是搞混了两种模式的配置要求。

先确认你的路由模式 #

打开项目根目录的package.json：

• 看next字段的版本号，13及以上版本初始化时默认是App Router模式；
• 同时看项目目录结构：根目录有app/文件夹就是App Router，只有pages/文件夹就是Pages Router。

对应解决方案 #

1. 如果你用的是Pages Router（传统模式）

• 必须保证项目根目录下有pages/文件夹，根页面是pages/index.js（不是page.js），全局入口_app.js要放在pages/_app.js；
• 检查pages/index.js是否存在，且正确导出默认组件，示例：

export default function Home() {
  return <div>首页内容</div>
}

• 如果项目里有app/文件夹，直接删除（App Router优先级高于Pages Router，会覆盖Pages的路由规则）。

2. 如果你用的是App Router（新版模式）

• 根页面必须是app/page.js（不是index.js），之前写的pages/index.js不会被识别；
• 新建app/page.js并写入基础内容，示例：

export default function Home() {
  return <div>首页内容</div>
}

• 此时pages/目录的文件可以删除，或者保留但不会生效，App Router不识别Pages的路由结构。

关于你问的页面结构问题 #

• Pages Router的动态路由写法是pages/[slug].js（比如pages/posts/[id].js）；
• App Router的动态路由写法是app/[slug]/page.js（比如app/posts/[id]/page.js）；
  你提到的pages/[页面名]/page.js是错误的，属于两种模式写法的混淆。

完成上述操作后重启项目，根路径的404问题即可解决。

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