Next.js (Pages Router) v16でドキュメント言語を設定する方法

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

問題

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

解決策

ルート<html>要素にlang属性を設定して、ページの主要言語を宣言します。Next.js Pages Routerでは、アプリケーションの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 propを受け入れます。"en"をコンテンツの言語コードに置き換えてください。

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

言語コードはUTSロケール識別子標準形式に従います: language-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属性を更新します。next.config.jsでi18nが設定されている場合、localeプロパティはDocumentコンポーネントで利用可能です。