コンテンツをスキップ
アプリケーションの構築ルーティングカスタムDocument

カスタムDocument

カスタムDocumentは、ページをレンダリングするために使用される<html>タグと<body>タグを更新できます。

デフォルトのDocumentを上書きするには、以下に示すようにファイル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>
  )
}

豆知識:

  • _documentはサーバー上でのみレンダリングされるため、このファイルではonClickのようなイベントハンドラを使用できません。
  • Html、Head /、Main /、NextScript /は、ページが適切にレンダリングされるために必要です。

注意点

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

renderPageのカスタマイズ

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

このパターンを使用することはお勧めしません。代わりに、段階的にApp Routerを採用することを検討してください。App Routerを使用すると、ページとレイアウトのデータをより簡単にフェッチできます。

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

豆知識:

  • _document内のgetInitialPropsは、クライアントサイドの遷移中には呼び出されません。
  • _documentのctxオブジェクトは、getInitialPropsで受け取るものと等価であり、renderPageが追加されています。