React

React コンポーネントで翻訳やロケール切り替えが必要なときは @better-translate/react を使います。

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

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

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

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

1import { configureTranslations } from "@better-translate/core";23const en = {4  home: {5    title: "Hello",6  },7} as const;89const es = {10  home: {11    title: "Hola",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. 型付きプロバイダー + フックのペアを作る

useTranslations() でキーとロケールの自動補完を得たいが、ジェネリックの繰り返しや宣言ファイルを避けたい場合は、トランスレーターを一度だけ束ねます：

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

1import { createBetterTranslateReact } from "@better-translate/react";23import { translator } from "./i18n";45export const { BetterTranslateProvider, useTranslations } =6  createBetterTranslateReact(translator);

4. アプリをラップする

src/main.tsx を作成または更新し、アプリローカルのプロバイダーを import します：

tsx

1import React from "react";2import ReactDOM from "react-dom/client";34import { App } from "./app";5import { BetterTranslateProvider } from "./i18n-react";67ReactDOM.createRoot(document.getElementById("root")!).render(8  <React.StrictMode>9    <BetterTranslateProvider>10      <App />11    </BetterTranslateProvider>12  </React.StrictMode>,13);

5. コンポーネント内で翻訳を読む

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

tsx

1import { useTranslations } from "./i18n-react";23export function Header() {4  const { locale, setLocale, t } = useTranslations();56  return (7    <header>8      <h1>{t("home.title")}</h1>9      <button onClick={() => setLocale("en")} disabled={locale === "en"}>10        English11      </button>12      <button onClick={() => setLocale("es")} disabled={locale === "es"}>13        Español14      </button>15    </header>16  );17}

React のみを使う場合

次の場合は @better-translate/core + @better-translate/react のみで足ります。

React SPA
Expo アプリ
ロケール変更がクライアントコンポーネントで行われる

Next.js App Router の場合は、クライアントフック用にこのパッケージを残し、ルーティングとサーバーヘルパー用に Next.js アダプターを追加します。

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

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

次に読む

例