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 のようになります。