自定义Document通常用于扩充您的应用程序<html>和<body>标签。这是必需的，因为Next.js页面会跳过周围文档标记的定义。
要覆盖默认值Document，请创建文件./pages/_document.js并扩展Document类，如下所示：
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument上面的代码是
DocumentNext.js添加的默认代码。如果不需要更改它们，请随时从中删除getInitialProps或render函数MyDocument。
<Html>，<Head />，<Main />和<NextScript />所需要的页面被正确渲染。
允许将自定义属性用作道具，例如lang：
<Html lang="en"><Head />此处使用的组件与中的组件不同next/head。<Head />此处使用的组件仅应用于<head>所有页面通用的任何代码。对于其他所有情况，例如<title>标记，我们建议next/head在您的页面或组件中使用。
该ctx对象等同于中接收到的对象，但又增加了一个getInitialProps：
renderPage：Function-一个回调，它运行实际的React渲染逻辑（同步）。装饰此功能以支持服务器渲染包装器（如Aphrodite的包装器）很有用renderStatic
注意事项
Document仅在服务器中呈现，类似的事件处理程序onClick将无法工作。<Main />浏览器不会初始化外部的React组件。难道不是在这里添加应用程序逻辑或自定义的CSS（像styled-jsx）。如果您需要所有页面中的共享组件（例如菜单或工具栏），请查看该App组件。DocumentgetInitialProps在客户端转换期间，或者在静态优化页面时，不会调用的功能。Document当前不支持Next.js数据获取方法，例如getStaticProps或getServerSideProps。
客制化 renderPage
应该注意的是，您应该进行自定义的唯一原因
renderPage是与css-in-js库一起使用，这些库需要包装应用程序才能正确地与服务器端渲染一起使用。
它使用一个options对象作为进一步定制的参数：
import Document from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const originalRenderPage = ctx.renderPage
ctx.renderPage = () =>
originalRenderPage({
// useful for wrapping the whole react tree
enhanceApp: (App) => App,
// useful for wrapping in a per-page basis
enhanceComponent: (Component) => Component,
})
// Run the parent `getInitialProps`, it now includes the custom `renderPage`
const initialProps = await Document.getInitialProps(ctx)
return initialProps
}
}
export default MyDocument
Typescript
您可以使用内置DocumentContext类型并更改文件名，./pages/_document.tsx如下所示：
作者：terry，如若转载，请注明出处：https://www.web176.com/nextjs/2424.html
