Next.js高级特性：自定义Document

自定义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

Next.js高级特性：自定义Document

注意事项

客制化 renderPage

Typescript

相关推荐

发表回复

客制化 `renderPage`