时间戳

首页 > 解决方案 > NextJS：主要和 Nextscript

javascript - NextJS：主要和 Nextscript

问题描述

稍微探索一下 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模板。但是我对Mainand的功能有点困惑Nextscript。

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

标签： javascriptreactjsnext.js

解决方案

NextScript 类在这里

主课在这里，我在下面复制了相同的内容。主要呈现 html/errorHtml 来自this.context._documentProps 

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>
    )
  }
}

您可以在此处找到有关自定义文档的实际文档

推荐阅读