渐进式迁移至Next.js 13后app目录页面显示404的问题排查

• 原Next.js 12站点升级至Next.js 13.0.0 + React 18.2.0，执行npm run dev后运行正常
• 手动添加app/test/page.js对应/test路由，访问时出现404错误
• 即使使用npx create-next-app site --use-npm创建的13.0.0新项目，手动添加app/test/page.js后访问/test仍返回404
• 疑问：是否遗漏关键配置？是否需要单独设置让Next.js同时识别pages和app目录？

Next.js 13.0.0的App Router（即app目录路由）属于实验性功能，默认处于关闭状态，必须手动在配置中启用：

1. 在项目根目录创建或修改next.config.js文件，添加experimental.appDir: true配置项：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

2. 重启开发服务器（停止当前npm run dev进程，重新执行该命令）
3. 再次访问/test即可正常加载页面

• Next.js 13.0.0支持同时使用pages和app目录，路由优先级为：app目录中的路由会覆盖pages目录下的同路径路由
• 后续Next.js 13.4及更高版本中，App Router转为稳定功能，无需再手动配置experimental.appDir

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