NextJS 15预渲染/404页面报错：不应在pages/_document外导入模块

先修正命令拼写错误 #

首先注意你执行的命令里developement是拼写错误，正确应为development，虽然这可能不是核心问题，但建议先修正：

NODE_ENV=development npm run build

核心问题排查与解决方案 #

1. 检查全局组件/布局的非法导入

错误提示“不应在pages/_document之外导入相关模块”，大概率是你在pages/_app.js或全局布局组件、自定义hooks中，导入了只能在pages/_document.js里使用的模块（比如next/document提供的Html、Head、Main、NextScript），或者第三方服务端专属模块（比如Prisma被错误导入到客户端组件中）。

• 逐一排查pages/_app.js、全局样式文件、所有全局注册的组件，把这类模块移到pages/_document.js中，确保客户端组件只导入客户端兼容的代码。

2. 生成自定义404页面绕过默认模板

既然默认404页面触发了问题，直接在pages目录下创建自定义404.js，替代默认页面：

// pages/404.js
export default function Custom404() {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
      <div className="text-center">
        <h1 className="text-5xl font-bold text-gray-800">404</h1>
        <p className="mt-4 text-xl text-gray-600">页面不存在</p>
      </div>
    </div>
  )
}

构建时Next.js会优先使用这个自定义页面，避免默认404的预渲染错误。

3. 检查构建环境变量的影响

尝试切换到production环境执行构建，看是否能绕过问题：

NODE_ENV=production npm run build

部分依赖在development环境下的行为可能和production不一致，导致预渲染异常。

4. 清理缓存与重新安装依赖

缓存或损坏的依赖也可能引发这类问题，执行以下步骤重置：

# 删除缓存和依赖文件夹
rm -rf .next node_modules package-lock.json
# 重新安装依赖
npm install
# 再次执行构建
NODE_ENV=development npm run build

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