探索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模板。但是我对MainNextscript的功能有些困惑。
Main只是一页吗?什么是Nextscript(哪个脚本)?

最佳答案

NextScript类为here

而主类是here,我在下面复制了相同的内容。 Main从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上找到实际文档

09-25 19:32