🙌
Next.jsの_document.tsxと_app.tsxのHeadコンポーネントに入れる情報の違い
結論
_document.tsx
_document.tsxの<Head>には、アプリケーション全体で共通の静的な内容
具体例
- アプリケーション全体で共通のメタデータ（<meta>タグ）
- サイトの説明（description）
- キーワード（keywords）
- OGP（Open Graph Protocol）のメタデータ
_app.tsx
_app.tsxの<Head>には、ページごとに動的に変更される内容
具体例
- ページごとに動的に変更されるメタデータ（<meta>タグ）
- ページのタイトル（<title>タグ）
- ページの説明（description）
- ページごとに必要なスタイルシート（<link>タグ）
- ページごとに必要な外部スクリプト（<script>タグ）
補足
_app.tsxの<Head>に入れた内容は、_document.tsxの<Head>の内容をオーバーライドします。したがって、アプリケーション全体で共通の内容を_app.tsxの<Head>に入れることもできますが、可読性と保守性の観点から、_document.tsxに入れることが推奨されます。
また、ページコンポーネント（pages/ディレクトリ内のファイル）でも<Head>コンポーネントを使用できます。ページコンポーネントの<Head>は、_app.tsxの<Head>の内容をオーバーライドします。これにより、ページごとに固有のメタデータやスタイルシートを設定できます。
Discussion