自定义 <Document>

Examples

  • 在服务端呈现
  • 初始化服务端时添加文档标记元素
  • 通常实现服务端渲染会使用一些 css-in-js 库，如styled-components, glamorous 或 emotion。styled-jsx是 Next.js 自带默认使用的 css-in-js 库
    Next.js会自动定义文档标记，比如，你从来不需要添加<html>, <body>等。如果想自定义文档标记，你可以新建./pages/_document.js，然后扩展Document类：
  1. // _document is only rendered on the server side and not on the client side
  2. // Event handlers like onClick can't be added to this file
  3.  
  4. // ./pages/_document.js
  5. import Document, { Head, Main, NextScript } from 'next/document'
  6.  
  7. export default class MyDocument extends Document {
  8.   static async getInitialProps(ctx) {
  9.     const initialProps = await Document.getInitialProps(ctx)
  10.     return { ...initialProps }
  11.   }
  12.  
  13.   render() {
  14.     return (
  15.       <html>
  16.         <Head>
  17.           <style>{`body { margin: 0 } /* custom! */`}</style>
  18.         </Head>
  19.         <body className="custom_class">
  20.           <Main />
  21.           <NextScript />
  22.         </body>
  23.       </html>
  24.     )
  25.   }
  26. }

钩子getInitialProps接收到的参数ctx对象都是一样的

  • 回调函数renderPage是会执行 React 渲染逻辑的函数(同步)，这种做法有助于此函数支持一些类似于 Aphrodite 的 renderStatic 等一些服务器端渲染容器。
    注意：<Main />外的 React 组件将不会渲染到浏览器中，所以那添加应用逻辑代码。如果你页面需要公共组件（菜单或工具栏），可以参照上面说的App组件代替。