Next.js 如何自定义 _document.js？

推荐答案

在 Next.js 中，_document.js 是一个用于自定义 HTML 文档结构的文件。通过创建或修改 _document.js，你可以控制整个页面的 HTML 结构，包括 <html>、<head> 和 <body> 标签。

以下是一个自定义 _document.js 的示例：

// www.javascriptcn.com code example
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

本题详细解读

1. _document.js 的作用

_document.js 是 Next.js 中用于自定义 HTML 文档结构的文件。它允许你控制整个页面的 HTML 结构，包括 <html>、<head> 和 <body> 标签。默认情况下，Next.js 会自动生成这些标签，但通过自定义 _document.js，你可以添加自定义的 meta 标签、样式表、脚本等。

2. 创建 _document.js

要自定义 _document.js，你需要在 pages 目录下创建一个名为 _document.js 的文件。这个文件必须导出一个继承自 Document 的类。

3. getInitialProps 方法

getInitialProps 是一个静态方法，用于在服务器端渲染时获取初始属性。你可以在这个方法中执行一些异步操作，并将结果传递给 render 方法。

4. render 方法

render 方法用于渲染页面的 HTML 结构。你可以在这个方法中自定义 <Html>、<Head>、<Main> 和 <NextScript> 组件。

• <Html>：用于定义 HTML 文档的根元素。
• <Head>：用于定义文档的头部内容，如 meta 标签、样式表等。
• <Main>：用于渲染页面的主要内容。
• <NextScript>：用于加载 Next.js 的脚本。

5. 示例代码解析

在示例代码中，我们创建了一个 MyDocument 类，继承自 Document。在 render 方法中，我们自定义了 HTML 结构，添加了一些 meta 标签和一个 favicon。<Main /> 和 <NextScript /> 是必须的，它们分别用于渲染页面内容和加载 Next.js 的脚本。

通过这种方式，你可以完全控制 Next.js 应用的 HTML 结构，并根据需要添加自定义内容。