Next.js 13生产环境app目录及路由组页面404问题求助

• 检查页面组件导出规范
  所有page.js/page.tsx文件必须导出默认React组件，如果缺少export default，Next.js无法识别页面，构建后会生成0字节文件，直接导致404。示例正确写法：

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

• 升级Next.js到稳定版本
  Next.js 13早期的appDir实验性版本存在不少已知bug，建议升级到13.4及以上稳定版（appDir从13.4起转为稳定特性），执行命令：

  npm install next@latest react@latest react-dom@latest
  

• 清理缓存后重新构建
  本地删除.next目录和node_modules/.cache，彻底清理缓存后重新构建：

  rm -rf .next node_modules/.cache
  npm run build
  

• 检查next.config.js配置
  确保配置无冲突项：

  • 仅开启appDir: true，避免多余的basePath、rewrites规则干扰路由匹配；
  • 排查自定义webpack配置是否误删了Next.js默认的页面处理规则。

• 验证路由组结构正确性
  路由组(dashboard)用于聚合路由但不添加URL路径，需确保内部结构合规：

  • app/(dashboard)/page.js对应根路径/，app/(dashboard)/settings/page.js对应/settings；
  • 避免路由组外部存在同名page.js，防止路由匹配冲突。

• 确认部署产物完整性
  检查部署时是否完整上传了.next目录下的所有文件，部分平台可能忽略隐藏文件或特定目录，导致页面资源缺失。

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