Building Your ApplicationRoutingCustom Document

カスタムドキュメント

カスタムDocumentは、Pageのレンダリングに使用される<html>および<body>タグを更新できます。

デフォルトのDocumentをオーバーライドするには、以下のようにpages/_documentファイルを作成します。

import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

知っておくと良いこと:

_documentはサーバーでのみレンダリングされるため、このファイルではonClickなどのイベントハンドラーは使用できません。

<Html>、<Head />、<Main />、<NextScript />は、ページが正しくレンダリングされるために必要です。

注意点

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

renderPage のカスタマイズ

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

このパターンを使用することは推奨しません。 代わりに、App Router を段階的に採用することを検討してください。これにより、ページやレイアウトのデータ取得が容易になります。

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

知っておくと良いこと:

_documentのgetInitialPropsは、クライアントサイドの遷移中には呼び出されません。

_documentのctxオブジェクトは、getInitialPropsで受け取るものと同等であり、renderPageが追加されています。