Vercel部署Next.js应用时构建报错，该如何调试？

这个错误虽显示在node_modules目录下，但本质是项目配置或文件结构导致Next.js构建导出时无法正确解析路由页面，以下是针对初学者的调试步骤：

1. 检查pages目录结构 #

确保pages目录下无异常文件：

• 不要存在空的.js/.tsx等页面文件
• 动态路由（如[id].js）命名规则正确，无语法错误
• 避免将组件、工具函数等非页面文件直接放在pages目录下

2. 本地复现并清除缓存 #

先在本地排查问题，比Vercel远程调试更高效：

• 删除本地的node_modules、.next文件夹
• 重新执行npm install安装依赖
• 运行npm run build尝试本地构建，若复现错误，说明问题出在本地项目中，针对性排查

如果本地构建正常，在Vercel部署时可强制清除缓存：
进入Vercel项目的「Settings」→「General」→「Build & Development Settings」，将「Build Command」改为：

rm -rf .next && npm run build

3. 检查Next.js版本与依赖兼容性 #

• 尝试升级或降级Next.js到稳定版本，执行：

npm install next@latest

• 排查项目中是否存在与当前Next.js版本不兼容的第三方依赖（如插件、UI库），可暂时移除可疑依赖后再尝试构建

4. 排查next.config.js配置 #

若自定义了next.config.js中的exportPathMap、rewrites等配置项：

• 确保exportPathMap返回的每个路由条目都包含正确的page属性，不存在undefined的情况
• 注释掉可疑配置项，逐步排查是否由配置导致问题

5. 检查动态路由与数据获取函数 #

如果项目包含动态路由页面：

• 确认getStaticPaths返回的paths数组格式正确，每个条目都有有效的params参数
• 检查getStaticProps/getServerSideProps函数是否存在逻辑错误，导致页面数据异常

报错日志 #

TypeError: Cannot read properties of undefined (reading 'page')
    at /vercel/path0/node_modules/next/dist/export/index.js:223:40
    at Array.filter (<anonymous>)
    at /vercel/path0/node_modules/next/dist/export/index.js:222:43
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1168:21
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async /vercel/path0/node_modules/next/dist/build/index.js:1044:17
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:20)
    at async Object.build [as default] (/vercel/path0/node_modules/next/dist/build/index.js:65:29)

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