TanStack Router

アプリで TanStack Router または TanStack Start を使用していて、ロケール対応の URL が必要な場合は、@better-translate/tanstack-router を使用します。

ほとんどの実際のアプリでは、以下と組み合わせて使用します：

@better-translate/core — 翻訳機能用
@better-translate/react — 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 { defineRouting } from "@better-translate/tanstack-router";23export const routing = defineRouting({4  defaultLocale: "en",5  locales: ["en", "es"] as const,6  routeTemplate: "/$lang",7});

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}" を使います。

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 を使用している場合は、同じルーティングとナビゲーションの設定を維持してください。次に、@better-translate/tanstack-router/server からサーバーヘルパーを追加します。これは Next.js でリクエストヘルパーを追加するのと同じ方法です。

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

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

サンプル

tanstack-start-example