# Next.js の html lang を ja に設定

<!DOCTYPE html>
<html lang="ja"></html>

html にある lang は重要で、html lang 属性が未設定の場合ブラウザーの自動翻訳機能が誤作動して表示おかしくなることがあります。

html lang 属性が未設定の影響

アクセシビリティ
html lang 属性は、スクリーンリーダーや翻訳ツールなどのアクセシビリティ支援技術にとって重要な情報です。言語属性が設定されていない場合、これらのツールは適切な読み上げや翻訳を行うことができません。
検索エンジン最適化（SEO）
html lang 属性は、検索エンジンにとっても重要です。言語属性が設定されていると、検索エンジンはそれに基づいてコンテンツを適切にインデックスし、ユーザーに適切な結果を提供することができます。言語属性が設定されていない場合、検索エンジンはコンテンツを正しく判断することができない可能性があります。
国際化対応
html lang 属性は、国際化（i18n）に関連する機能をサポートするために使用されます。Web サイトやアプリケーションが複数の言語に対応している場合、言語属性が設定されていることで、ユーザーの言語設定に合わせた適切なコンテンツを提供することができます。

Next.js で HTML の lang 属性を ja に設定する方法紹介します。

# 方法１: next.config.js 編集

next.config.jsファイルにある i18n オプションを編集します。

module.exports = {
  reactStrictMode: true,
  i18n: {
    locales: ["ja"],
    defaultLocale: "ja",
  },
};

next.config.js とは

next.config.js は Next.js アプリケーションの Webpack の設定、環境変数の設定、カスタムのルーティング、サーバーサイドレンダリング設定、ビルド設定など様々な機能をカスタマイズできる設定ファイルです。

# 方法２: `_document.tsx` ファイル編集

pages/_document.tsx ファイルを編集します。

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

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

`_document.tsx` とは

_document.tsx は Next.js アプリケーションで使用される特殊なファイルです。このファイルは、アプリケーションの HTML ドキュメントの全体的な構造をカスタマイズするために使用されます。

通常、Next.js では各ページごとに<Head>コンポーネントを使用してページ固有のメタデータやヘッドタグを設定します。しかし、_document.tsx を使用すると、すべてのページで共通するメタデータやヘッドタグ、CSS のグローバルスタイル、サーバーサイドレンダリングの設定などを一元管理することができます。

_document.tsx は通常、pages ディレクトリ内に作成されます。このファイルは、Next.js のドキュメントコンポーネントである Document を拡張し、独自のカスタマイズを行います。具体的なカスタマイズは、アプリケーションの要件に応じて異なりますが、以下に一般的な例をいくつか示します。

_document.tsx は高度なカスタマイズが必要な場合に使用されますが、通常のアプリケーションでは必要ありません。