Next.js 14旧Pages架构下404页面预渲染报错求助

问题根源 #

你遇到的预渲染错误，核心原因是404页面中导入了仅允许在pages/_document.js里使用的模块（比如next/document下的Document、Html、Head、Main、NextScript这些组件），Next.js严格禁止在普通页面（包括404）中导入这些内容。

修复步骤 #

1. 检查并移除错误导入
   打开你的pages/404.js，找到类似下面的导入语句并删除：

   // 错误：禁止在404页面导入这些
   import { Document, Html, Head, Main, NextScript } from 'next/document'
   

2. 重构404页面结构
   404页面是普通的React组件，如需设置页面头部，改用next/head中的Head组件，示例如下：

   // 正确的404页面写法
   import Head from 'next/head'
   
   export default function Custom404() {
     return (
       <>
         <Head>
           <title>404 - 页面未找到</title>
         </Head>
         <div className="container">
           <h1>404</h1>
           <p>抱歉，你访问的页面不存在</p>
         </div>
       </>
     )
   }
   

3. 确认_document.js的正确性
   如果你有自定义的pages/_document.js，确保它是唯一导入next/document模块的文件，结构示例：

   // pages/_document.js 正确写法
   import { Html, Head, Main, NextScript } from 'next/document'
   
   export default function Document() {
     return (
       <Html lang="zh-CN">
         <Head />
         <body>
           <Main />
           <NextScript />
         </body>
       </Html>
     )
   }
   

额外注意 #

Next.js 14对Pages目录的兼容性依然保留，但_document的使用规则没有变化——它仅用于定义整个应用的HTML骨架，不能被其他页面组件引用或导入其内部模块。

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