Next.js如何选择路由？同时存在pages与app目录时的路由规则

核心路由优先级 #

在Next.js 13及以上版本中，当项目同时存在app和pages目录时，app目录的路由会优先生效，具体规则如下：

• 页面路由：如果app目录下存在对应路径的page.js/page.tsx文件，访问该路径时会优先渲染app目录的页面，pages目录下的同名页面会被忽略。
• API路由：pages/api下的旧API路由依然可用，但如果app/api下有相同路径的route.js/route.ts文件，app/api的路由会优先被调用。
• 全局布局/模板：当app目录存在时，app/layout.js会作为所有页面（包括pages目录下的页面）的根布局，pages/_app.js和pages/_document.js会被自动忽略。

相关配置调整 #

Next.js没有专门的环境变量来切换路由优先级，但可以通过next.config.js中的配置禁用app目录，强制使用pages路由系统：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: false, // 禁用app目录，仅使用pages路由
  },
};

module.exports = nextConfig;

注意事项 #

这种混合目录的模式主要用于渐进式迁移旧的pages路由到新的app路由系统，建议在迁移完成后删除其中一个目录，避免路由冲突和维护混淆。

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