# General Translation React SDKs (gt-react, gt-next, gt-react-native): 概要 URL: https://generaltranslation.com/ja/docs/react/overview.mdx --- title: 概要 description: 使用するフレームワークに適した React ライブラリとクイックスタートを確認します。 --- React アプリ向けの General Translation 国際化ライブラリでは、React SPA、Next.js App Router、Next.js Pages Router、TanStack Start、React Native で共通のコンポーネント、フック、設定を使用できます。 これは React セクションのランディングページです。読み進めてエコシステムを理解し、自分のフレームワークを選んだら、対応するクイックスタートに進んでください。 ## React エコシステム [#ecosystem] 各フレームワークファミリーにはそれぞれ専用のパッケージがあります。 * `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] すべての React i18n ライブラリは同じコアコンポーネントとフックを共有しているため、学ぶべき翻訳モデルは 1 つです。重要な部分は次のとおりです。 * [``](/docs/react/reference/components/t) **コンポーネント。** 任意の JSX を [``](/docs/react/reference/components/t) で囲むと、ネストされた要素やフォーマットを含めてインプレースで翻訳できます。[``](/docs/react/reference/components/t) は内容全体をひとまとまりの単位として翻訳します。 * [`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`](/docs/react/reference/components/gt-provider) **コンポーネント。** アプリをこれでラップすると、各コンポーネントが翻訳とアクティブなロケールにアクセスできるようになります。これに翻訳を渡す方法はフレームワークごとに少し異なるため、それぞれに独自のクイックスタートがあります。 * `gt` **CLI。** `gt` パッケージは翻訳を生成し、ダウンロードします。その [`gt.config.json`](/docs/cli/reference/config) ファイルで、`defaultLocale`、対象の `locales`、および翻訳の `output` パスを定義します。[`npx gt translate`](/docs/cli/reference/commands/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)、[``](/docs/react/reference/components/derive) コンポーネント、および [`useLocale`](/docs/react/reference/hooks/use-locale) などのロケールフックも、すべてのフレームワークで共通です。 ## フレームワークを選択する [#frameworks] どのセットアップでも同じ翻訳コンポーネントと CLI を使いますが、初期化方法と翻訳の読み込み方法は異なります。まずは使用するフレームワークのクイックスタートから始めてください。 * **サーバーサイドレンダリングの React アプリを構築する場合:** `gt-react` を初期化し、サーバーで翻訳を読み込み、[`GTProvider`](/docs/react/reference/components/gt-provider) をハイドレートします。[React クイックスタート](/docs/react/react-quickstart) を参照してください。 * **React SPA (Vite、Create React App) を構築する場合:** レンダリング前にブラウザーで `gt-react` を初期化します。[React SPA クイックスタート](/docs/react/react-spa-quickstart) を参照してください。 * **Next.js App Router アプリを構築する場合:** `withGTConfig` プラグインを追加し、server コンポーネントと client コンポーネントで [``](/docs/react/reference/components/t) を使用します。[Next.js App Router クイックスタート](/docs/react/nextjs-quickstart) を参照してください。 * **Next.js Pages Router アプリを構築する場合:** ページ props を通じてロケールと翻訳を読み込みます。[Next.js Pages Router クイックスタート](/docs/react/nextjs-pages-router-quickstart) を参照してください。 * **TanStack Start アプリを構築する場合:** `src/router.tsx` で General Translation を初期化し、root route loader から [`GTProvider`](/docs/react/reference/components/gt-provider) をハイドレートします。[TanStack Start クイックスタート](/docs/react/tanstack-start-quickstart) を参照してください。 * **React Native アプリを構築する場合:** エントリポイントで初期化し、polyfills 用に Babel プラグインを追加します。[React Native クイックスタート](/docs/react/react-native-quickstart) を参照してください。 セットアップが完了したら、[Guides](/docs/react/guides/configuring) で共通の workflow (JSX と文字列の翻訳、変数のフォーマット、複数形、辞書、ロケールの管理) を確認し、[Reference](/docs/react/reference/config) ですべてのコンポーネント、フック、関数、設定オプションを参照できます。どちらもすべてのフレームワークに共通して適用され、フレームワークごとの差異はタブで示されています。