Next.js部署Vercel/Render报错：<Html>不可在pages/_document外导入

将Next.js项目部署到Vercel和Render平台时构建失败，触发错误：Error: <Html> should not be imported outside of pages/_document，该错误在预渲染/404页面时触发，已检查所有代码实例并尝试其他解决方案但无效。

部署日志 #

2025-11-09T05:51:40.915169472Z ==> 使用Node.js版本22.16.0（默认）
2025-11-09T05:51:40.93843889Z ==> 指定Node.js版本的文档：https://render.com/docs/node-version
2025-11-09T05:51:42.823814604Z ==> 执行构建命令 'npm install; npm run build'...
2025-11-09T05:52:01.509378658Z 
2025-11-09T05:52:01.509406559Z 19秒内添加398个包，共检查399个包
2025-11-09T05:52:01.50941833Z 
2025-11-09T05:52:01.50943582Z 47个包寻求资金支持
2025-11-09T05:52:01.50944201Z   执行`npm fund`查看详情
2025-11-09T05:52:01.545693791Z 
2025-11-09T05:52:01.545718582Z 1个中等严重程度漏洞
2025-11-09T05:52:01.545722762Z 
2025-11-09T05:52:01.545727522Z 要解决所有问题，请执行：
2025-11-09T05:52:01.545732472Z   npm audit fix --force
2025-11-09T05:52:01.545735863Z 
2025-11-09T05:52:01.545739353Z 执行`npm audit`查看详情。
2025-11-09T05:52:01.736672003Z 
2025-11-09T05:52:01.736693424Z > news_portal@0.1.0 build
2025-11-09T05:52:01.736697894Z > next build
2025-11-09T05:52:01.736701384Z 
2025-11-09T05:52:01.828808545Z  ⚠ 你的环境中使用了非标准的"NODE_ENV"值，这会导致项目不一致，强烈建议不要这样做。详情：https://nextjs.org/docs/messages/non-standard-node-env
2025-11-09T05:52:02.270933486Z ⚠ 未找到构建缓存，请配置构建缓存以加快重建速度。详情：https://nextjs.org/docs/messages/no-cache
2025-11-09T05:52:02.318265764Z    ▲ Next.js 15.3.3
2025-11-09T05:52:02.318290275Z 
2025-11-09T05:52:02.336252936Z    创建优化的生产构建...
2025-11-09T05:52:25.640260956Z  ✓ 19.0秒内编译成功
2025-11-09T05:52:25.642201393Z    检查代码规范及类型有效性...
2025-11-09T05:52:34.759323343Z    收集页面数据...
2025-11-09T05:52:42.498721744Z    生成静态页面（0/79）...
2025-11-09T05:52:43.656355705Z Error: <Html> should not be imported outside of pages/_document.
2025-11-09T05:52:43.656382056Z 详情：https://nextjs.org/docs/messages/no-document-import-in-page
2025-11-09T05:52:43.656388996Z     at y (.next/server/chunks/8548.js:6:1351)
2025-11-09T05:52:43.656395016Z 预渲染页面"/404"时出错。详情：https://nextjs.org/docs/messages/prerender-error
2025-11-09T05:52:43.656398776Z Error: <Html> should not be imported outside of pages/_document.
2025-11-09T05:52:43.656402536Z 详情：https://nextjs.org/docs/messages/no-document-import-in-page
2025-11-09T05:52:43.656406167Z     at K (/opt/render/project/src/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js:16:6526)
2025-11-09T05:52:43.656409857Z     at y (/opt/render/project/src/.next/server/chunks/8548.js:6:1351)
2025-11-09T05:52:43.656415667Z     at Object.react_stack_bottom_frame (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:10313:18)
2025-11-09T05:52:43.656420847Z     at renderWithHooks (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5399:19)
2025-11-09T05:52:43.656439858Z     at renderElement (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5834:23)
2025-11-09T05:52:43.656442598Z     at retryNode (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6765:31)
2025-11-09T05:52:43.656445158Z     at renderNodeDestructive (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6715:11)
2025-11-09T05:52:43.656448168Z     at renderElement (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5820:11)
2025-11-09T05:52:43.656450808Z     at retryNode (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6765:31)
2025-11-09T05:52:43.656453098Z     at renderNodeDestructive (/opt/render/project/src/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6715:11)
2025-11-09T05:52:43.656455438Z 导出时在/_error: /404遇到错误，退出构建。
2025-11-09T05:52:43.662630531Z  ⨯ Next.js构建工作进程退出，代码：1，信号：null
2025-11-09T05:52:43.905331381Z ==> 构建失败 😞
2025-11-09T05:52:43.905351472Z ==> 部署常见排查方法：https://render.com/docs/troubleshooting-deploys

解决方案 #

• 检查自定义404页面：确认pages/404.js（Pages Router）或app/404.js（App Router）中是否直接/间接导入了next/document里的<Html>组件。Next.js规定<Html>只能在pages/_document.js（Pages Router）中使用，App Router下无需手动导入该组件，框架会自动处理。
• 排查全局布局组件：如果项目有全局布局，检查是否在非_document.js的文件中引入了<Html>，尤其是被404页面引用的布局文件。
• 避免路由模式混用：若同时使用Pages Router和App Router，不要在App Router的页面中导入Pages Router的<Html>组件。
• 清理缓存重新构建：执行命令rm -rf .next node_modules && npm install && npm run build，清理依赖和构建缓存后重试。
• 修正NODE_ENV值：将部署环境的NODE_ENV设置为production，避免因非标准环境值导致的构建异常。

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