Next.jsのDocumentが理解出来てなかったのでメモっておく

Next.js

Posted at 2024-05-30

Documentとは

ページがレンダリングされるときにタグと

タグを拡張するために使用される。
このファイルはサーバーサイドでのみレンダリングされます。
そのためonClickなどのイベントハンドラーはDocumentで利用できない。

使い方

Next.jsのpagesコンポーネントは、デフォルトで

、を定義してくれるが、これらを変更したい場合はpages/_document.jsを使う。
この時にDocumentをextendsする。
Html, Head, Main, NextScriptのいずれかが不足しているとエラーが発生します。

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

参考

Next.jsの_document.jsを理解する
 Custom Document
[カスタム Document(https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/custom-document)
Next.jsのnext/headとnext/documentについて

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up