Vercel部署Next.js应用报错：未识别嵌套页面，如何解决？

1. 通过vercel.json调整构建与路由配置 #

Vercel的vercel.json可辅助适配Next.js的页面识别逻辑，针对嵌套页面问题可尝试以下配置：

确保构建命令与框架匹配 #

如果Vercel未正确识别Next.js构建流程，可在vercel.json中明确指定构建规则，避免环境差异导致的页面识别失败：

{
  "framework": "nextjs",
  "buildCommand": "next build",
  "installCommand": "npm install"
}

自定义路由映射（针对特殊嵌套路由场景） #

若嵌套页面是动态路由或自定义路径，可通过rewrites配置强制路由映射，比如将/parent/:id指向对应的嵌套页面文件：

{
  "rewrites": [
    { "source": "/parent/:path*", "destination": "/parent/[path]/page.js" }
  ]
}

2. 修复pageExtensions配置崩溃问题 #

你之前修改pageExtensions导致崩溃，大概率是配置遗漏了页面文件的扩展名，正确配置方式如下：

Pages Router 场景 #

在next.config.js中声明所有页面文件的扩展名，确保包含嵌套页面使用的后缀：

// next.config.js
module.exports = {
  pageExtensions: ['js', 'jsx', 'ts', 'tsx'] // 不要遗漏项目中页面文件的任何扩展名
};

App Router 场景 #

App Router默认识别page.js/page.tsx作为页面入口，若自定义了页面后缀，需同步更新配置，且所有页面文件必须符合后缀规则：

// next.config.js
module.exports = {
  pageExtensions: ['page.js', 'page.tsx', 'custom-page.js'] // 包含所有自定义页面后缀
};

注意：配置后所有页面文件需匹配后缀规则，比如原about.js需改为about.page.js（若配置了page.js后缀），否则Next.js会因无法识别页面导致崩溃。

3. 结合日志与项目结构排查 #

• 查看构建日志：聚焦Page not found或Module not found类错误，确认嵌套页面的路径是否符合Next.js路由规则（Pages Router下pages/parent/child.js对应/parent/child；App Router下app/parent/child/page.js对应/parent/child）。
• 核对项目结构：确认嵌套页面的目录层级是否正确，App Router下必须以page.js/page.tsx作为页面入口文件，Pages Router下直接用文件路径映射路由。

4. 其他排查步骤 #

• 本地先执行next build和next start，验证嵌套页面是否能正常访问，排除本地与Vercel的环境差异。
• 锁定Next.js版本：确保package.json中Next.js版本与本地一致，避免Vercel自动安装的版本兼容性问题。

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