探索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
(哪个脚本)? 最佳答案
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上找到实际文档