TanStack Router

TanStack Router または TanStack Start でロケール対応 URL が必要なときは @better-translate/tanstack-router を使います。

実際のアプリでは、多くの場合次と組み合わせます。

トランスレーター用 @better-translate/core
React コンポーネント内フック用 @better-translate/react

1. パッケージをインストールする

npm install @better-translate/core @better-translate/react @better-translate/tanstack-router

2. 共有トランスレーターを作る

src/lib/i18n.ts を作成します：

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello from TanStack Router",6  },7} as const;89const es = {10  home: {11    title: "Hola desde TanStack Router",12  },13} as const;1415export const translator = await configureTranslations({16  availableLocales: ["en", "es"] as const,17  defaultLocale: "en",18  fallbackLocale: "en",19  messages: { en, es },20});

3. ロケールルーティング設定を追加する

src/lib/routing.ts を作成します：

1import {2  defineRouting,3  SUPPORTED_TANSTACK_LOCALE_ROUTE_SYNTAXES,4} from "@better-translate/tanstack-router";56export const routing = defineRouting({7  defaultLocale: "en",8  locales: ["en", "es"] as const,9  routeTemplate: "/$lang",10});1112console.log(SUPPORTED_TANSTACK_LOCALE_ROUTE_SYNTAXES);

4. ローカライズされたナビゲーションヘルパーを作る

src/lib/navigation.tsx を作成します：

tsx

1import {2  Link,3  useLocation,4  useNavigate,5  useRouter,6} from "@tanstack/react-router";78import { createNavigationFunctions } from "@better-translate/tanstack-router/navigation";910import { routing } from "./routing";1112export const {13  Link: I18nLink,14  useLocale,15  useNavigate: useI18nNavigate,16  usePathname: useI18nPathname,17} = createNavigationFunctions({18  Link,19  routing,20  useLocation,21  useNavigate,22  useRouter,23});

必須のロケールセグメントには routeTemplate: "/$lang" または routeTemplate: "/{$lang}" を使います。デフォルトロケールでセグメントを省略する場合は "/{-$lang}" を使います。

サポートされるロケールパラメータ名は @better-translate/core 由来で、ここでは SUPPORTED_TANSTACK_LOCALE_ROUTE_SYNTAXES と必須・任意のサブセットとして公開されています。

5. React プロバイダーでアプリをラップする

src/app.tsx を作成します：

tsx

1import { RouterProvider } from "@tanstack/react-router";23import { BetterTranslateProvider } from "@better-translate/react";45import { router } from "./router";6import { translator } from "./lib/i18n";78export function App() {9  return (10    <BetterTranslateProvider translator={translator}>11      <RouterProvider router={router} />12    </BetterTranslateProvider>13  );14}

6. ロケール対応リンクと翻訳を使う

src/components/header.tsx を作成します：

tsx

1import { useTranslations } from "@better-translate/react";23import { translator } from "../lib/i18n";4import { I18nLink, useLocale } from "../lib/navigation";56export function Header() {7  const currentLocale = useLocale();8  const { t } = useTranslations<typeof translator>();910  return (11    <header>12      <h1>{t("home.title")}</h1>13      <I18nLink to="/" params={{ lang: currentLocale }}>14        Home15      </I18nLink>16    </header>17  );18}

TanStack Start

TanStack Start を使う場合も、同じルーティングとナビゲーション設定を維持します。Next.js でリクエストヘルパーを追加するのと同様に、@better-translate/tanstack-router/server のサーバーヘルパーを追加します。

ロケールファイルを自動生成する

すべての翻訳を手書きする代わりに、CLI で文字列を抽出しロケールファイルを生成できます：CLI ガイド

例

tanstack-start-example