Next.js（ページルーター）v16でドキュメント言語を設定する方法

ブラウザとスクリーンリーダー向けにページ言語を宣言する

問題

ウェブページは、ブラウザ、検索エンジン、支援技術に対して主要言語を宣言する必要があります。明示的な言語宣言がなければ、これらのツールはコンテンツの言語を推測しなければなりません。スクリーンリーダーはユーザーのシステム言語をデフォルトとするため、コンテンツの言語が異なる場合に発音が不正確になります。ブラウザはソース言語の情報がないため、翻訳機能を確実に提供できません。検索エンジンは正しい言語の対象者向けにページをインデックス化するのに苦労し、その言語で検索するユーザーの発見可能性が低下します。

解決策

ルートの <html> 要素に lang 属性を設定して、ページの主要言語を宣言します。Next.jsのPagesルーターでは、アプリケーションのHTML構造をラップするカスタムDocumentコンポーネントを作成することでこれを行います。lang 属性は標準の言語コードを受け入れ、ブラウザ、支援技術、検索エンジンにコンテンツが使用する言語を伝え、正確な発音、適切な翻訳の提供、正確なインデックス作成を可能にします。

手順

1. カスタムドキュメントファイルを作成する

pages ディレクトリに _document.js（またはTypeScriptの場合は _document.tsx）という名前のファイルを作成します。このファイルを使用すると、アプリケーションの各ページをラップするHTML文書構造をカスタマイズできます。

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

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

next/document からの Html コンポーネントは、ルートHTML要素に言語属性を設定する lang プロップを受け入れます。"en" をコンテンツの言語コードに置き換えてください。

2. 適切な言語コードを使用する

言語コードはUTSロケール識別子の標準形式 language-region-script に従います。regionとscriptはオプションです。ほとんどの場合、2文字のISO 639-1言語コードを使用します。

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

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

一般的な例としては、英語の "en" 、スペイン語の "es" 、フランス語の "fr" 、ドイツ語の "de" 、日本語の "ja" などがあります。必要に応じて "en-US" や "en-GB" などの地域バリアントを含めることができます。

3. ロケールに基づいて動的に言語を設定する

アプリケーションがNext.jsのi18nルーティングを通じて複数のロケールをサポートしている場合は、ルーターコンテキストから現在のロケールにアクセスして言語を動的に設定します。

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

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Next.jsの組み込みi18n設定を使用する場合、フレームワークは自動的にロケールを提供し、lang属性を更新します。localeプロパティは、next.config.jsでi18nが設定されている場合、Documentコンポーネントで利用可能です。