TanStack Start v1でロケールベースのルーティングを実装する方法

問題

多言語アプリケーションを構築する際、すべてに影響を与える根本的な決断があります：アプリケーションはどのようにして表示する言語を判断するのでしょうか？明示的なメカニズムがなければ、URL /about はあいまいになります—どの言語のコンテンツを表すのかわかりません。ユーザーは特定の言語バージョンへのリンクを共有できず、検索エンジンはどのバージョンがどの対象ユーザー向けなのかを理解するのに苦労します。このあいまいさは、言語バリアントを区別する明確な方法がないため、ユーザーエクスペリエンスとSEOの両方に問題を引き起こします。

解決策

URLパスに直接言語識別子を入れます。例えば /en/about や /fr/about のようにします。これにより、各パスは特定の言語に固有のものとなり、ユーザーと検索エンジンの両方にとってのあいまいさが解消されます。ルート構造にロケールパラメータを使用することで、各URLは自己説明的で共有可能になり、ユーザーは好みの言語でコンテンツをブックマークまたは共有でき、検索エンジンは各言語バリアントを適切にインデックス化できるようになります。

ステップ

1. ロケールレイアウトルートを作成する

{-$locale} 構文を使用してオプションのロケールパラメータを定義し、ロケールパラメータがオプションである柔軟なルーティングパターンを作成します。TanStack Startはファイルベースのルーティングを使用しており、ルートは src/routes ディレクトリで定義されます。

import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}")({ 
  component: LocaleLayout,
});

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

このルートは /about（ロケールは未定義）と /en/about（ロケールは "en"）の両方にマッチし、ロケールプレフィックスありとなしの両方のURLをサポートできます。

2. ロケールレイアウトの下に子ルートを作成する

TanStack Routerはネストされたルーティングを使用して、URLと正しいコンポーネントツリーをマッチングしてレンダリングします。ロケールパラメータの子としてルートファイルを作成し、URLからロケールを継承します。

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/about")({
  component: AboutPage,
});

function AboutPage() {
  const { locale } = Route.useParams();
  const currentLocale = locale || "en";

  return (
    <div>
      <h1>About Us</h1>
      <p>Current locale: {currentLocale}</p>
    </div>
  );
}

ルートファイル構造 {-$locale}/about.tsx は /about や /en/about のようなパスを作成し、どちらも同じコンポーネントをレンダリングしてロケールパラメータにアクセスできるようにします。

3. コンポーネントでロケールパラメータにアクセスする

useParams フックを使用して、URLからロケールを読み取り、表示する言語を決定します。

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/products")({
  component: ProductsPage,
});

function ProductsPage() {
  const { locale } = Route.useParams();
  const displayLocale = locale || "en";

  return (
    <div>
      <h1>{displayLocale === "fr" ? "Produits" : "Products"}</h1>
    </div>
  );
}

ロケールパラメータが未定義の場合、コンポーネントはデフォルトで基本言語を使用し、アプリケーションがローカライズされたURLとローカライズされていないURLの両方を処理できるようにします。

4. ロケールを保持するリンクを作成する

ロケールパラメータを持つLinkコンポーネントを使用して、現在の言語を維持しながらページ間を移動します。

import { Link, createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/{-$locale}/")({
  component: HomePage,
});

function HomePage() {
  const { locale } = Route.useParams();

  return (
    <nav>
      <Link to="/{-$locale}/about" params={{ locale }}>
        About
      </Link>
      <Link to="/{-$locale}/products" params={{ locale }}>
        Products
      </Link>
    </nav>
  );
}

paramsプロパティに現在のロケールを渡すことで、リンクは自動的にユーザーの現在の言語コンテキストに一致するURLを生成します。例えば、フランス語バージョンを表示している場合は/fr/aboutのようになります。