NextJS 13 App Router重启开发服务器后所有路由均返回404页面

• 排查根布局文件的语法错误
  修改根布局（app/layout.tsx或pages/_app.tsx，依路由模式而定）时，哪怕只是修改标题和描述，也可能引入语法错误（比如未闭合标签、变量未定义、导出语句错误），导致Next.js无法正确解析路由。
  直接打开根布局文件逐行检查：

  • 确认export default语句正确导出布局组件
  • 检查JSX标签是否完全闭合（比如<title>标签是否遗漏闭合标签）
  • 确认标题、描述对应的变量已正确定义或传入

• 验证路由文件的命名与结构合规性

  • 若使用App Router（app/目录）：确保路由文件夹和页面文件命名符合规范，页面文件必须为page.tsx/page.jsx，文件夹命名无特殊字符或违规格式。
  • 若使用Pages Router（pages/目录）：确认pages/下文件结构正确，比如index.tsx对应根路由，无意外删除或重命名路由文件的情况。

• 检查next.config.js的关键配置
  重点排查可能影响路由的配置项：

  • 确认basePath未被错误设置（无需子路径部署时，应删除该配置或设为空字符串）
  • 检查rewrites、redirects配置是否意外拦截所有路由
  • 可临时替换为最简配置测试：

    /** @type {import('next').NextConfig} */
    const nextConfig = {}
    
    module.exports = nextConfig
    

  替换后重启开发服务器，观察问题是否解决。

• 彻底清除缓存并重新构建
  除删除.next目录外，执行以下步骤：

  • 删除node_modules并重装依赖：rm -rf node_modules && npm install（对应你的包管理器调整命令）
  • 清除包管理器缓存：npm cache clean --force（或yarn cache clean/pnpm store prune）
  • 重新启动开发服务器：npm run dev

• 检查环境变量配置
  确认NEXT_PUBLIC_BASE_PATH等可能影响路由前缀的环境变量未被错误设置，避免路由解析异常。

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