# General Translation React SDKs (gt-react, gt-next, gt-react-native): General Translation の設定
URL: https://generaltranslation.com/ja/docs/react/guides/configuring.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: `<GTProvider>` を使用して General Translation を初期化し、認証情報を設定して翻訳を配信する方法。

サーバーレンダリングされる React と各フレームワーク統合では、設定に加えて、コンポーネントに翻訳を提供する [`GTProvider`](/docs/react/reference/components/gt-provider) が必要です。React SPA は [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) で直接初期化します。この設定については、[React SPA クイックスタート](/docs/react/react-spa-quickstart) を参照してください。

*注: `gt-react`、`gt-tanstack-start`、`gt-react-native` は `gt.config.json` を自動では読み込みません。これをインポートして、そのフィールドを初期化呼び出しに渡してください。Next.js では、[`withGTConfig`](/docs/react/nextjs/config) プラグインが `gt.config.json` を読み込んでくれます。*

## ライブラリを初期化する [#initialize]

初回レンダリングの前に、General Translation を一度だけ設定します。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    サーバーとクライアントの両方で読み込まれるモジュール内で、[`initializeGT`](/docs/react/reference/config#initialize) を一度呼び出します。リクエストのロケールはフレームワークによって解決され、サーバーレンダリング時に対応する翻訳が提供されます。

    ```tsx title="src/routes/root.tsx"
    import { initializeGT } from 'gt-react';
    import gtConfig from '../../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`../_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    [`loadTranslations`](/docs/react/reference/functions/load-translations) と [`loadDictionary`](/docs/react/reference/functions/load-dictionary) の callback、認証情報、ロケール設定は、すべて初期化呼び出しに指定します。[`GTProvider`](/docs/react/reference/components/gt-provider) には指定しません。
  </Tab>

  <Tab value="Next.js">
    Next.js では手動で初期化を呼び出す必要はありません。[`withGTConfig`](/docs/react/nextjs/config) プラグインを `next.config.ts` に追加してください。これにより `gt.config.json` が読み込まれ、build 時とリクエスト時の翻訳処理が設定されます。

    ```ts title="next.config.ts"
    import { withGTConfig } from 'gt-next/config';

    const nextConfig = {};

    export default withGTConfig(nextConfig, {
      // `dictionary`、`loadTranslationsPath`、ロケール overrides などのオプション
    });
    ```
  </Tab>

  <Tab value="TanStack Start">
    サーバーとクライアントの起動時に [`initializeGT`](/docs/react/reference/config#initialize) を一度呼び出し、設定をスプレッドして渡します。

    ```tsx
    import { initializeGT } from 'gt-tanstack-start';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```

    [`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) を登録したうえで、リクエストスコープ内では `gt-tanstack-start` の [`getLocale`](/docs/react/tanstack-start/reference/functions/get-locale) を使用します。[`localeRouting`](/docs/react/reference/config#locale-routing) を有効にすると、ミドルウェアは cookie と `Accept-Language` header より前に、path の プレフィックス からロケールを解決します。
  </Tab>

  <Tab value="React Native">
    アプリの起動時に [`initializeGT`](/docs/react/reference/config#initialize) を一度呼び出し、設定をスプレッドして渡します。

    ```tsx
    import { initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>
</Tabs>

## プロバイダーを追加する [#provider]

コンポーネントが翻訳を参照できるように、アプリを [`GTProvider`](/docs/react/reference/components/gt-provider#contracts) でラップします。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    サーバーでアクティブなロケールの翻訳を読み込み、その 2 つの値をプロバイダーに渡します。具体的な loader API は、使用しているフレームワークによって異なります。

    ```tsx title="src/routes/root.tsx"
    import { GTProvider, getTranslationsSnapshot, parseLocale } from 'gt-react';

    export async function loadRoot(request: Request) {
      const locale = parseLocale(request);
      return {
        locale,
        translations: await getTranslationsSnapshot(locale),
      };
    }

    export function Root({ locale, translations, children }) {
      return (
        <GTProvider locale={locale} translations={translations}>
          {children}
        </GTProvider>
      );
    }
    ```

    プロバイダーは [`region`](/docs/react/reference/components/gt-provider#region) と [`enableI18n`](/docs/react/reference/components/gt-provider#enable-i18n) (デフォルトは `true`) も受け取れます。翻訳が無効になっている場合、またはアクティブなロケールがデフォルトロケールと同じ場合、コンテンツはソース言語でレンダリングされます。
  </Tab>

  <Tab value="Next.js">
    [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts) でルートレイアウトをラップします。これはプラグインからリクエストのロケールと翻訳を読み取るため、App Router のプロバイダーが受け取るのは `children` のみです。

    ```tsx title="app/layout.tsx"
    import { GTProvider, useLocale } from 'gt-next';

    export default function RootLayout({ children }: { children: React.ReactNode }) {
      const locale = useLocale();
      return (
        <html lang={locale}>
          <body>
            <GTProvider>{children}</GTProvider>
          </body>
        </html>
      );
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    アクティブな [`locale`](/docs/react/reference/components/gt-provider#locale) と、それに対応する [`translations`](/docs/react/reference/components/gt-provider#translations) を渡します。どちらも必須です。

    ```tsx
    import { GTProvider, getTranslationsSnapshot } from 'gt-tanstack-start';

    const translations = await getTranslationsSnapshot(locale);

    <GTProvider locale={locale} translations={translations}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="React Native">
    アプリを [`<GTProvider>`](/docs/react/reference/components/gt-provider#contracts) でラップします。アクティブなロケールの翻訳はこれ自体で読み込まれるため、`translations` props は受け取りません。[`locale`](/docs/react/reference/components/gt-provider#locale) は省略可能で、デフォルトでは保存済みまたはデバイスのロケールが使われます。

    ```tsx
    import { GTProvider } from 'gt-react-native';

    <GTProvider>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

<Callout type="info">
  **v11 での変更 (React) :** `gt-react` のプロバイダーは、`config`、[`loadTranslations`](/docs/react/reference/functions/load-translations)、認証情報を props として受け取らなくなりました。これらの setup は初期化呼び出しで行うようになり、プロバイダーが受け取るのは解決済みの [`locale`](/docs/react/reference/components/gt-provider#locale) と [`translations`](/docs/react/reference/components/gt-provider#translations) のみです。
</Callout>

プロバイダーと初期化のすべてのオプションについては、[Configuration リファレンス](/docs/react/reference/config) を参照してください。

## 認証情報を追加 [#credentials]

翻訳配信機能と開発機能では、環境変数で設定したプロジェクト ID と API キーを使用します。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    フレームワークのクライアント向け環境変数の規約に従ってプロジェクト ID と開発用 API キーを公開し、それらを [`initializeGT`](/docs/react/reference/config#initialize) に渡します。本番用の API キーは絶対に公開しないでください。
  </Tab>

  <Tab value="Next.js">
    環境変数に設定してください。プラグインが自動的に読み取ります。`GT_API_KEY` (本番用のキー) はサーバー側と CI の CLI で使用されます。`NEXT_PUBLIC_` プレフィックスは、ブラウザに渡す必要がある値にのみ使用してください。

    ```bash title=".env.local"
    GT_PROJECT_ID="..."
    GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="TanStack Start">
    バンドラの公開環境変数で設定し、初期化呼び出しに渡します。

    ```bash title=".env (Vite)"
    VITE_GT_PROJECT_ID="..."
    VITE_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>

  <Tab value="React Native">
    バンドラの公開環境変数で設定し、初期化呼び出しに渡します。

    ```bash title=".env (Expo)"
    EXPO_PUBLIC_GT_PROJECT_ID="..."
    EXPO_PUBLIC_GT_DEV_API_KEY="gtx-dev-..."
    ```
  </Tab>
</Tabs>

*注: クライアントに公開するのは、必ず開発用 API キーだけにしてください。本番用の API キーは CI の CLI で使用するもので、クライアントには決して含めないでください。*

## 翻訳の配信方法を選択する [#delivery]

General Translation では、設定に応じて次のいずれかのモードで翻訳を解決します。これはどのフレームワークでも共通です。

* **ローカルファイル:** [`loadTranslations`](/docs/react/reference/functions/load-translations) を指定して、バンドル済みの JSON をインポートします。[翻訳をローカルに保存する](/docs/react/guides/storing-translations)を参照してください。
* **General Translation CDN:** [`projectId`](/docs/react/reference/config#project-id) を指定し (カスタム loader は使わずに) 、Runtime に GT の CDN から翻訳を取得します。
* **カスタムエンドポイント:** カスタム [`cacheUrl`](/docs/react/reference/config#cache-url) を設定して、自分のホストから読み込みます。

開発環境では、[`projectId`](/docs/react/reference/config#project-id) と開発用 API キーを指定すると、オンデマンド翻訳とホットリロードが有効になり、作業しながら新しい文字列を翻訳できます。本番環境では、翻訳は事前生成済みファイルまたは CDN から取得されます。

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/managing-locales
- /docs/react/guides/storing-translations

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.