NextJS：Main 和 Nextscript

Question

探索 NextJS 的服务器端渲染功能。它看起来非常好并且易于使用。我已经探索了 _document.js 文件，我们可以包含它来覆盖默认值。我在示例中找到了以下代码：

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

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link rel="stylesheet" href="/_next/static/style.css" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

现在我知道我们正在覆盖当前的 HTML 模板。但是我对 Main 和 Nextscript.

的功能有点困惑

Main只是一个页面吗？什么是 Nextscript（哪个脚本）？

Answer 1

NextScript Class 是 here

和 Main Class 是 here 我在下面复制了相同的内容。主要从 this.context._documentProps

呈现 html/ errorHtml

export class Main extends Component {
  static contextTypes = {
    _documentProps: PropTypes.any
  }

  render () {
    const { html, errorHtml } = this.context._documentProps
    return (
      <Fragment>
        <div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
        <div id='__next-error' dangerouslySetInnerHTML={{ __html: errorHtml }} />
      </Fragment>
    )
  }
}

您可以在自定义文档中找到实际文档 here

Answer 2

对于那些将来会寻找这个问题的答案的人...

来自 'next/document' 的组件 NextScript 获取来自 context._documentProps 和 returns 的文件列表，每个文件作为一个元素，如下所示：

<script
        key={file}
        src={`${assetPrefix}/_next/${file}`}
        nonce={this.props.nonce}
        async
      />

它还以类似的方式从 context._documentProps 和 returns 中动态导入它们：

<script
        async
        key={bundle.file}
        src={`${assetPrefix}/_next/${bundle.file}`}
        nonce={this.props.nonce}
      />

NextJS：Main 和 Nextscript

NextJS: Main and Nextscript

javascript

reactjs

next.js