Next.js混合目录问题：/customers路由访问返回404

下面是几个可能导致问题的原因及排查方向：

• 静态路由文件存在异常
  既然构建日志显示/customers路由存在，说明你应该有app/customers/page.tsx文件。先检查这个文件：

  • 文件名是否正确：必须是page.tsx（或page.jsx/page.ts），不能是index.tsx或customers.tsx这类不符合App Router规范的名称；
  • 组件导出是否正确：必须导出默认组件，比如export default function CustomersPage() { ... }，仅导出命名组件会导致页面无法被识别；
  • 文件是否有语法错误：如果构建时该文件编译失败，会导致页面无法生成，仔细查看构建日志里的报错信息。

• 动态路由与静态路由的匹配优先级冲突
  你同时存在app/[location]/page.tsx动态路由和app/customers/page.tsx静态路由，Next.js会优先匹配静态路由/customers。但如果动态路由的逻辑（比如自定义路由规则）干扰了静态路由匹配，可能导致异常。可以暂时移除app/[location]/page.tsx，重新构建后测试/customers是否能访问，以此排除冲突。

• 构建产物缺失
  执行yarn build后，检查.next/server/app/customers目录下是否生成了对应的页面文件（比如page.js）。如果该目录不存在或文件缺失，说明构建过程中该页面未被正确生成，需要排查构建时的警告或错误。

• 生产环境路由缓存问题
  若yarn dev开发环境下/customers能访问，但yarn start生产环境下404，可能是生产环境路由缓存异常。尝试删除.next目录后重新执行yarn build && yarn start，清空缓存后再测试。

• Next.js配置异常
  检查next.config.js中的路由相关配置：

  • 确认是否正确启用了App Router（新版本默认启用，旧版本需设置experimental.appDir: true）；
  • 有没有自定义rewrites规则，可能把/customers重定向到了不存在的路径。

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