React
Reactコンポーネントで翻訳やロケール切り替えが必要な場合は、@better-translate/reactを使用してください。
1. パッケージのインストール
npm install @better-translate/core @better-translate/react2. 共有トランスレーターの作成
src/i18n.tsを作成してください：
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. アプリをラップする
src/main.tsxを作成または更新してください：
tsx
1import React from "react";2import ReactDOM from "react-dom/client";34import { BetterTranslateProvider } from "@better-translate/react";56import { App } from "./app";7import { translator } from "./i18n";89ReactDOM.createRoot(document.getElementById("root")!).render(10 <React.StrictMode>11 <BetterTranslateProvider translator={translator}>12 <App />13 </BetterTranslateProvider>14 </React.StrictMode>,15);4. コンポーネント内で翻訳を読み取る
src/header.tsxを作成してください：
tsx
1import { useTranslations } from "@better-translate/react";23import { translator } from "./i18n";45export function Header() {6 const { locale, setLocale, t } = useTranslations<typeof translator>();78 return (9 <header>10 <h1>{t("home.title")}</h1>11 <button onClick={() => setLocale("en")} disabled={locale === "en"}>12 English13 </button>14 <button onClick={() => setLocale("es")} disabled={locale === "es"}>15 Español16 </button>17 </header>18 );19}オプション: アプリ全体でuseTranslations()を一度だけ型付けする
プレーンなuseTranslations()で翻訳キーの自動補完を行い、
各コンポーネントで<typeof translator>を繰り返し記述したくない場合は、宣言ファイルを1つ追加してください：
src/better-translate.d.tsを作成してください：
ts
1import { translator } from "./i18n";23declare module "@better-translate/react" {4 interface BetterTranslateReactTypes {5 translator: typeof translator;6 }7}これにより、コンポーネントではジェネリックなしでフックを呼び出せます：
tsx
1import { useTranslations } from "@better-translate/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}明示的なジェネリックも引き続き機能するため、コードベースに適合する場合はuseTranslations<typeof translator>()を使い続けることもできます。
Reactのみを使用する場合
以下の場合は、@better-translate/core + @better-translate/reactのみを使用してください：
- アプリがReact SPAの場合
- アプリがExpoアプリの場合
- ロケールの変更がクライアントコンポーネントで行われる場合
Next.js App Routerを使用している場合は、このパッケージをクライアントフック用に保持し、ルーティングとサーバーヘルパー用にNext.jsアダプターを追加してください。
ロケールファイルの自動生成
すべての翻訳を手動で書く代わりに、CLIを使用して文字列を抽出し、ロケールファイルを生成してください：CLIガイド