Next.js _document.tsx 的使用

6 min read

在Next.js中，_document.tsx 是一个特殊的文件，用于自定义每个页面的 HTML 文件。

通过使用 _document.tsx，我们可以添加全局的 HTML、Head 和 Body 元素，包括引入外部 CSS 和 JavaScript 文件、设置 meta 标签、设置样式等等。

使用方式：

  1. 在项目根目录创建一个名为“pages”的文件夹（如果没有的话）；
  2. 在“pages”中创建一个名为“_document.tsx”的文件；
  3. 导入 Document 和 Head 组件；
  4. 创建一个继承 Document 的类；
  5. 重写 render 方法；
  6. 返回一个包含 html、head 和 body 的 React 元素。

示例代码：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <link rel="stylesheet" href="/styles.css" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在上面的代码中，我们添加了一个全局的 CSS 文件 styles.css 和一个 meta 标签。

需要注意的是，_document.tsx 只在服务器端渲染时运行，因此它不会影响客户端渲染的性能。

GitHub：https://github.com/vercel/next.js/blob/master/pages/_document.tsx