TanStack Start v1でドキュメント言語を設定する方法

問題

Webページは、異なるユーザーエージェント間で正しく機能するために、主要言語を宣言する必要があります。ルートHTMLエレメントに明示的な言語宣言がない場合、ブラウザはコンテンツの言語を判断できず、推測するしかありません。これにより、スクリーンリーダーはユーザーのシステム言語をデフォルトとして使用するため、コンテンツの言語が異なる場合に不正確な発音になります。ブラウザはソース言語情報がないため、正確な翻訳機能を提供できません。検索エンジンは適切な言語の対象者向けにコンテンツを確実にインデックス化することが困難になり、その言語で検索するユーザーにとって発見可能性が低下します。

解決策

htmlタグにlang属性を追加して、ページのデフォルト言語を設定します。TanStack Startでは、HTMLシェルはルートルートのshellComponentで定義され、<html>エレメントを含むドキュメント構造をレンダリングします。このエレメントに適切な言語コードを持つlang属性を追加することで、ブラウザ、支援技術、検索エンジンにコンテンツの言語を通知し、正しく処理して表示できるようにします。

手順

1. 現在のロケールを特定する

ルートルートのshellComponentプロパティは、すべてのルートコンテンツをラップし、常にサーバーサイドでレンダリングされるHTMLシェルを定義します。ルートパラメータ、Cookie、ヘッダーなど、アプリケーションのロケール検出メカニズムから現在のロケールを決定します。

import type { ReactNode } from "react";
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from "@tanstack/react-router";

export const Route = createRootRoute({
  shellComponent: RootDocument,
  component: RootComponent,
});

function RootComponent() {
  return <Outlet />;
}

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

これにより、言語属性を追加するシェル構造が確立されます。

2. html要素にlang属性を追加する

<html>要素にロケール値を使用してlang属性を設定します。コンテンツの言語に一致する有効なBCP 47言語タグを使用してください。

function RootDocument({ children }: { children: ReactNode }) {
  const locale = "en";

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

lang属性がドキュメントの言語を宣言するようになり、ブラウザや支援技術がコンテンツを適切に処理できるようになります。

3. 動的なロケール値を使用する

アプリケーションが複数のロケールをサポートしている場合は、ルーティングまたは状態管理システムから現在のロケールを取得し、シェルコンポーネントに渡します。

function RootDocument({ children }: { children: ReactNode }) {
  const locale = getCurrentLocale();

  return (
    <html lang={locale}>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

function getCurrentLocale(): string {
  return "en";
}

ドキュメントの言語がアクティブなロケールに基づいて更新されるようになり、lang属性が常に現在のコンテンツ言語を反映するようになります。