Wil*_*een 8 javascript reactjs next.js
探索 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（哪个脚本）？
小智 10
对于那些将来寻找这个问题答案的人......
'next/document' 中的组件 NextScript 从 context._documentProps 获取文件列表，并将每个文件作为元素返回，如下所示：
<script
key={file}
src={`${assetPrefix}/_next/${file}`}
nonce={this.props.nonce}
async
/>
它还从 context._documentProps 进行动态导入并以类似的方式返回它们：
<script
async
key={bundle.file}
src={`${assetPrefix}/_next/${bundle.file}`}
nonce={this.props.nonce}
/>
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>
)
}
}
您可以在此处找到有关自定义文档的实际文档