Next.js <NextScript /> 组件的使用详解

29 min read

Next.js 的 NextScript 组件用于在 HTML 中呈现基本的 Next.js JavaScript 编译资源。使用该组件很简单，只需将其包含在 your document.tsx 或 your document.jsx 中的 body 标签中即可。

例如，在你的文档中添加 NextScript 组件如下所示：

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

注意，NextScript 必须作为 Main 组件的后置元素。这是因为它将 Next.js 的此页资源包含在 HTML 中，以便资源可以在页面呈现中使用。您还可以使用其 props 实现更多功能，例如 async 和 defer 。

例如：

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript async={true} defer={true} />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

在上面的示例中，async 和 defer 属性将 Next.js 此页的资源异步载入和推迟载入，以优化页面的性能。