introduction

一个自定义的Document通常被使用在应用的<html>以及 <body>标签中,这是必要的,因为Next.js 页面跳过了周围文档的定义 ..

为了避免使用默认的Document,创建一个文件名叫做./pages/_document.js并扩展Document类

  1. import Document, { Html, Head, Main, NextScript } from 'next/document'
  3. class MyDocument extends Document {
  4.   static async getInitialProps(ctx) {
  5.     const initialProps = await Document.getInitialProps(ctx)
  6.     return { ...initialProps }
  7.   }
  9.   render() {
  10.     return (
  11.       <Html>
  12.         <Head />
  13.         <body>
  14.           <Main />
  15.           <NextScript />
  16.         </body>
  17.       </Html>
  18.     )
  19.   }
  20. }
  22. export default MyDocument

这上面的代码是Next.js 默认增加的Document, 随便移除getInitialProps或者render函数,如果你不需要改变它们 …

<Html>,<Head/>,<Main/>以及 <Nextscript />是必须的,为了让页面能够正确的渲染 …

自定义属性允许作为props, 例如 lang

<Head />组件并不是等同于next/head的,<Head />组件仅仅能够使用在Document组件中,但是<head>能够应用在各个页面中 …

对于其他的情况,例如<title>标签,我们推荐使用next/head在页面或者组件中 …

这个ctx对象能够等价于在getInitialProps中接收的 …,但是具有一个例外:

  • renderPage: Function 他是一个回调用来实际进行React逻辑(同步),它被用来装饰这个函数为了支持服务器渲染包装器(例如 Aphrodite’s 的renderStatic) …

注意

Document仅仅在服务器上渲染,事件处理器例如onClick不会工作 … ..

  • 在<Main />外的React 组件将不会被浏览器初始化,不要在这里增加应用逻辑或者自定义CSS(例如styled-jsx),如果你需要在所有页面中共享组件(例如菜单或者工具栏),查看

自定义App

进行替代 …

  • Document的getInitialProps 函数将不会在客户端过渡的时候进行调用,或者当一个页面时静态优化的 …
  • Document当前不支持Next.js 数据抓取函数(例如 getStaticProps或者getServerSideProps) …

自定义renderPage

应该注意到仅仅有一种原因进行renderPage的自定义(对于使用了css-in-js的库才需要包装这个应用正确的进行服务端渲染) …

他接收一个选项参数(是一个选项对象) …

  1. import Document from 'next/document'
  3. class MyDocument extends Document {
  4.   static async getInitialProps(ctx) {
  5.     const originalRenderPage = ctx.renderPage
  7.     ctx.renderPage = () =>
  8.       originalRenderPage({
  9.         // useful for wrapping the whole react tree
  10.         enhanceApp: (App) => App,
  11.         // useful for wrapping in a per-page basis
  12.         enhanceComponent: (Component) => Component,
  13.       })
  15.     // Run the parent `getInitialProps`, it now includes the custom `renderPage`
  16.     const initialProps = await Document.getInitialProps(ctx)
  18.     return initialProps
  19.   }
  20. }
  22. export default MyDocument

TypeScript

你能够使用内置的DocumentContext类型并改变文件名为./pages/_document.tsx

  1. import Document, { DocumentContext } from 'next/document'
  3. class MyDocument extends Document {
  4.   static async getInitialProps(ctx: DocumentContext) {
  5.     const initialProps = await Document.getInitialProps(ctx)
  7.     return initialProps
  8.   }
  9. }
  11. export default MyDocument