︙

Custom Document

カスタム Document は、Page を render するために使われる <html> タグと <body> タグを更新することができます。

Documentの default を上書きするには、以下に示すようにpages/_documentファイルを作成します。

pages/_document.tsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

pages/_document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Good to know

_documentは server 上だけでレンダリングされるため、onClickのようなイベントハンドラはこのファイルで使うことができません。

<Html>、<Head />、<Main />および<NextScript />は、ページが適切にレンダリングされるために必要です。

Caveats

_documentで使用される<Head /> component は、next/headとは異なります。ここで使用される<Head /> component は、すべてのページに共通の<head> code に対してのみ使用すべきです。<title>タグなど、他のすべてのケースでは、ページまたはコンポーネントでnext/headを使用することをお勧めします。
<Main />の外側の ReactComponent は、ブラウザーによって初期化されません。ここにアプリケーションロジックを追加したり、カスタムの CSS(styled-jsxのような)を追加しないでください。すべてのページで共有 Component(メニューやツールバーなど)が必要な場合は、代わりにLayoutを参照してください。
Documentは現在、Next.js のData Fetching methods、 getStaticProps や getServerSidePropsをサポートしていません。

Customizing `renderPage`

renderPageのカスタマイズは高度なもので、CSS-in-JS のようなライブラリが server-side rendering をサポートするためにのみ必要です。これは組み込みのstyled-jsxサポートには必要ありません。

We do not recommend using this pattern. Instead, consider incrementally adopting the App Router, which allows you to more easily fetch data for pages and layouts.

pages/_document.tsx

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const originalRenderPage = ctx.renderPage

    // Run the React rendering logic synchronously
    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
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

pages/_document.jsx

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage

    // Run the React rendering logic synchronously
    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
  }

  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Good to know

getInitialPropsは_document内で、Client サイドの遷移中には呼び出されません。

_documentのための ctx object は getInitialPropsで受け取ったものと同等で、renderPageが追加されています。

Caveats

Customizing renderPage

Customizing `renderPage`