# General Translation React SDKs (gt-react, gt-next): 概要 URL: https://generaltranslation.com/ja/docs/react/overview.mdx --- title: 概要 description: General Translation の React エコシステム、共有翻訳モデルの仕組み、そして使用するフレームワークに応じてどのクイックスタートを選べばよいかを説明します。 --- General Translation は、1 つの共通 API で React エコシステムの国際化を実現します。React のシングルページアプリ、Next.js アプリ、TanStack Start アプリ、React Native アプリのどれを構築する場合でも、同じコンポーネント、フック、設定を利用できます。 これは React セクションのランディングページです。読み進めてエコシステムを理解し、自分のフレームワークを選んだら、対応するクイックスタートに進んでください。 ## React エコシステム [#ecosystem] 各フレームワークにはそれぞれ専用のパッケージがありますが、いずれも同じ translation API を提供します。 * `gt-react` — Vite や Create React App などの、サーバーサイドレンダリングの React アプリおよびシングルページアプリ (SPA) 向け。[React クイックスタート](/docs/react/react-quickstart) または [React SPA クイックスタート](/docs/react/react-spa-quickstart) を参照してください。 * `gt-next` — Next.js App Router および Pages Router アプリ向け。[Next.js App Router クイックスタート](/docs/react/nextjs-quickstart) または [Next.js Pages Router クイックスタート](/docs/react/nextjs-pages-router-quickstart) を参照してください。 * `gt-tanstack-start` — TanStack Start アプリ向け。[TanStack Start クイックスタート](/docs/react/tanstack-start-quickstart) を参照してください。 * `gt-react-native` — Expo や bare React Native CLI を含む React Native アプリ向け。[React Native クイックスタート](/docs/react/react-native-quickstart) を参照してください。 *注:* `gt-tanstack-start` *および* `gt-react-native` *は実験的であり、現時点では本番環境での利用は推奨されていません。* ## 共有翻訳モデル [#shared-model] すべてのパッケージは同じコアを基盤としているため、このモデルを一度覚えれば、どこでも使い回せます。構成要素は次のとおりです。 * **[``](/docs/react/reference/components/t) コンポーネント。** 任意の JSX を `` で囲むと、ネストされた要素や書式を含めてインプレースで翻訳できます。`` は内容全体をひとまとまりの単位として翻訳します。 * **[`useGT`](/docs/react/reference/hooks/use-gt) フック。** プレースホルダー、`aria-label` の値、代替テキストなどの単独の文字列は、このフックが返す関数で翻訳します。`const gt = useGT();` のように呼び出し、その後 `gt('Hello, world!')` を使います。async App Router components では、`gt-next/server` の [`getGT`](/docs/react/nextjs/reference/functions/get-gt) を使用します。 * **`GTProvider` コンポーネント。** アプリをこれでラップすると、各コンポーネントが翻訳とアクティブなロケールにアクセスできるようになります。これに翻訳を渡す方法はフレームワークごとに少し異なるため、それぞれに独自のクイックスタートがあります。 * `gt.config.json`**。** プロジェクトルートに置く単一の設定ファイルで、`defaultLocale`、対象の `locales`、および翻訳ファイルの出力先を定義します。 * **`gt` CLI。** `gt` パッケージは翻訳を生成し、ダウンロードします。`npx gt translate` を実行すると、General Translation API を通じてプロジェクトを翻訳できます。 変数コンポーネント ([``](/docs/react/reference/components/var)、[``](/docs/react/reference/components/num)、[``](/docs/react/reference/components/currency)、[``](/docs/react/reference/components/datetime)) 、[``](/docs/react/reference/components/plural) コンポーネントと [``](/docs/react/reference/components/branch) コンポーネント、そしてロケールフックも、すべてのフレームワークで共通です。 ## フレームワークを選択する [#frameworks] どのセットアップでも同じ翻訳コンポーネントと CLI を使いますが、初期化方法と翻訳の読み込み方法は異なります。まずは使用するフレームワークのクイックスタートから始めてください。 * **サーバーサイドレンダリングの React アプリを構築する場合:** `gt-react` を初期化し、サーバーで翻訳を読み込み、`GTProvider` をハイドレートします。[React Quickstart](/docs/react/react-quickstart) を参照してください。 * **React SPA (Vite、Create React App) を構築する場合:** レンダリング前にブラウザーで `gt-react` を初期化します。[React SPA Quickstart](/docs/react/react-spa-quickstart) を参照してください。 * **Next.js App Router アプリを構築する場合:** `withGTConfig` プラグインを追加し、server components と client components で `` を使用します。[Next.js App Router Quickstart](/docs/react/nextjs-quickstart) を参照してください。 * **Next.js Pages Router アプリを構築する場合:** ページ props を通じてロケールと翻訳を読み込みます。[Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart) を参照してください。 * **TanStack Start アプリを構築する場合:** root route で General Translation を初期化し、loader から `GTProvider` をハイドレートします。[TanStack Start Quickstart](/docs/react/tanstack-start-quickstart) を参照してください。 * **React Native アプリを構築する場合:** エントリポイントで初期化し、polyfills 用に Babel プラグインを追加します。[React Native Quickstart](/docs/react/react-native-quickstart) を参照してください。 セットアップが完了したら、[Guides](/docs/react/guides/configuring) で共通の workflow (JSX と文字列の翻訳、変数の書式設定、複数形、辞書、ロケールの管理) を確認し、[Reference](/docs/react/reference/config) ですべてのコンポーネント、フック、関数、設定オプションを参照できます。どちらもすべてのフレームワークに共通して適用され、フレームワークごとの差異はタブで示されています。