# General Translation React SDKs (gt-react, gt-next, gt-react-native): `<GTProvider>`
URL: https://generaltranslation.com/ja/docs/react/reference/components/gt-provider.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: React コンポーネントツリーに翻訳とロケールのコンテキストを提供します。`<GTProvider>` コンポーネントの API リファレンス。

`<GTProvider>` の仕様は、フレームワークとルーターによって異なります。一部のプロバイダーはロケールデータを props として受け取りますが、他のプロバイダーはロケールデータを解決して読み込みます。

*注: [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) で初期化された React SPA はグローバル翻訳キャッシュを使用するため、プロバイダーは不要です。*

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。*

## 概要 [#overview]

| ランタイム                | 必須のprops                | ロケールと翻訳の取得元              |
| -------------------- | ----------------------- | ------------------------ |
| Reactサーバーレンダリング      | `locale`、`translations` | サーバーローダー                 |
| Next.js App Router   | なし                      | リクエストと`gt-next`のキャッシュ    |
| Next.js Pages Router | `locale`、`translations` | Pages Routerのデータラッパー     |
| TanStack Start       | `locale`、`translations` | リクエストローダー                |
| React Native         | なし                      | ネイティブのロケール検出と設定済みの翻訳ローダー |

[Props](#props)セクションでは、各propを受け取るproviderのバリアントを正確に示します。

## フレームワークごとの仕様 [#contracts]

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    サーバーサイドでレンダリングされる `gt-react` アプリでは、アクティブなロケールと翻訳スナップショットを渡します。[`initializeGT`](/docs/react/reference/config#initialize) の後にスナップショットを読み込みます。

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

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

    [`loadTranslations`](/docs/react/reference/functions/load-translations)、[`loadDictionary`](/docs/react/reference/functions/load-dictionary)、認証情報は provider ではなく、[初期化呼び出し](/docs/react/reference/config#initialization)で指定します。

    <Callout type="info">
      **v11 での変更:** `gt-react` の `<GTProvider>` は、`config`、[`loadTranslations`](/docs/react/reference/functions/load-translations)、[`loadDictionary`](/docs/react/reference/functions/load-dictionary)、認証情報を受け取らなくなりました。これらを [`initializeGT`](/docs/react/reference/config#initialize) に移動し、解決された `locale` と `translations` を provider に渡してください。
    </Callout>
  </Tab>

  <Tab value="Next.js">
    ### App Router

    App Router の provider は、`children` prop のみを受け取る async server component です。リクエストと `gt-next` の cache から、ロケール、リージョン、翻訳状態、翻訳、辞書を解決します。

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

    export default function RootLayout({ children }) {
      return <GTProvider>{children}</GTProvider>;
    }
    ```

    `locale`、`translations`、`dictionaries`、`region`、`enableI18n` は App Router の provider に渡さないでください。

    ### Pages Router

    Pages Router は共有の `gt-react` provider を再エクスポートします。[サーバーサイドレンダリング](/docs/react/nextjs-pages-router-quickstart#quickstart)または[静的生成](/docs/react/nextjs/pages-router-static-site-generation)で注入された値を渡し、ロケールの変更時に Next.js のルーティングを使用する場合は `_reload` を指定してください。

    ```tsx title="pages/_app.tsx"
    import Router from 'next/router';
    import { GTProvider } from 'gt-next';

    <GTProvider
      locale={pageProps.locale}
      translations={pageProps.translations}
      _reload={({ locale }) => {
        void Router.push(Router.pathname, Router.asPath, { locale });
      }}
    >
      <Component {...pageProps} />
    </GTProvider>
    ```
  </Tab>

  <Tab value="TanStack Start">
    `gt-tanstack-start` は共有 provider を再エクスポートします。[`gtMiddleware`](/docs/react/tanstack-start/reference/functions/gt-middleware) を登録した後、アクティブなロケールとその翻訳スナップショットを渡します。

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

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

  <Tab value="React Native">
    React Native の provider は初期ロケールを検出し、その翻訳を読み込み、ロケールの変更時に再レンダリングします。`locale` は任意で、`translations` は公開 prop ではありません。

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

    <GTProvider>
      <App />
    </GTProvider>
    ```

    翻訳の読み込み中に組み込みのローディングインジケーターを置き換えるには、`fallback` を渡します。
  </Tab>
</Tabs>

## 仕組み [#how-it-works]

* **React、TanStack Start、Next.js Pages Router。** provider は翻訳スナップショットを事前に受け取るため、翻訳済みコンテンツを同期的にレンダリングできます。
* **Next.js App Router。** server provider はリクエスト状態を読み取り、クライアント境界をレンダリングする前に翻訳と辞書を読み込みます。
* **React Native。** provider は Suspense を通じて解決したロケールの翻訳を読み込みます。利用可能になるまで `fallback` をレンダリングします。
* **ツリーのコンテキスト。** 子孫コンポーネントは provider context から、アクティブなロケール、翻訳、辞書、リージョン、翻訳状態を取得します。
* **ロケールの変更。** Web provider はロケールを cookie に永続化し、再読み込み処理を実行します。React Native はネイティブストレージに永続化し、provider の状態を更新します。

## Props [#props]

| Prop                                                    | 説明                                                                                                               | 型                            | 任意        | デフォルト                          |
| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------- | ------------------------------ |
| [`children`](#children)                                 | コンポーネントツリー。すべてのproviderで受け付けます。                                                                                  | `ReactNode`                  | はい        | —                              |
| [`locale`](#locale)                                     | アクティブなロケール。React、TanStack Start、Next.js Pages Routerでは必須で、React Nativeでは任意です。Next.js App Routerでは受け付けません。        | `string \| LocaleCandidates` | フレームワーク固有 | React Nativeではデバイスまたは保存済みのロケール |
| [`translations`](#translations)                         | 翻訳スナップショット。React、TanStack Start、Next.js Pages Routerでは必須です。Next.js App RouterおよびReact Nativeでは受け付けません。           | `object`                     | フレームワーク固有 | —                              |
| [`dictionaries`](#dictionaries)                         | ロケールごとの辞書。React、TanStack Start、Next.js Pages Router、React Nativeで受け付けます。Next.js App Routerでは内部で読み込まれます。          | `object`                     | はい        | —                              |
| [`region`](#region)                                     | アクティブなリージョン。React、TanStack Start、Next.js Pages Router、React Nativeで受け付けます。Next.js App Routerでは内部で解決されます。         | `string`                     | はい        | 保存済みのリージョンまたは `undefined`      |
| [`enableI18n`](#enable-i18n)                            | 翻訳を有効にするかどうか。React、TanStack Start、Next.js Pages Router、React Nativeで受け付けます。Next.js App Routerでは内部で解決されます。        | `boolean`                    | はい        | `true`                         |
| [`fallback`](#fallback)                                 | React Nativeが翻訳を取得している間に表示するコンテンツ。React Nativeのみ。                                                                | `ReactNode`                  | はい        | 読み込みインジケーター                    |
| [`_reload`](#reload)                                    | フレームワークの再読み込みコールバック。React、TanStack Start、Next.js Pages Routerで受け付けます。Next.js App RouterおよびReact Nativeでは受け付けません。 | `(state) => void`            | はい        | フレームワーク固有                      |
| [`onMissingTranslation`](#missing-translation)          | 不足しているインラインまたはJSX翻訳を処理します。Next.js App Routerでは受け付けません。                                                           | `OnMissingTranslation`       | はい        | —                              |
| [`onMissingDictionaryEntry`](#missing-dictionary-entry) | 不足している辞書エントリを処理します。Next.js App Routerでは受け付けません。                                                                  | `OnMissingDictionaryEntry`   | はい        | —                              |
| [`onMissingDictionaryObj`](#missing-dictionary-object)  | 不足している辞書オブジェクトを処理します。Next.js App Routerでは受け付けません。                                                                | `OnMissingDictionaryObj`     | はい        | —                              |

### `children` [#children]

**型** `ReactNode` · **任意**

翻訳コンテキストを受け取るコンポーネントツリーです。すべてのプロバイダーバリアントで `children` を指定できます。

### `locale` [#locale]

**型** `string | LocaleCandidates` · **フレームワーク固有**

ツリーで使用するアクティブなロケール:

* React、TanStack Start、Next.js Pages Router では、解決済みの `string` として必須です。
* React Native では任意です。ロケール候補を受け付け、省略した場合は保存済みまたはデバイスのロケールが使用されます。
* Next.js App Router の provider では指定できません。リクエストロケールは内部で解決されます。

下流では [`useLocale`](/docs/react/reference/hooks/use-locale) を使用して結果を取得します。

### `translations` [#translations]

**型** `Record<Locale, Record<Hash, Translation>>` · **フレームワーク固有**

[`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) によって生成される翻訳スナップショットです。React、TanStack Start、Next.js Pages Router では、各プロバイダーがコンテンツを同期的に解決するために必要です。

Next.js App Router のプロバイダーは、スナップショットを内部で読み込みます。React Native のプロバイダーは `translations` prop を受け取らず、アクティブなロケールの翻訳を自動的に読み込みます。

### `dictionaries` [#dictionaries]

**型** `Record<Locale, Dictionary>` · **任意**

[`useTranslations`](/docs/react/reference/hooks/use-translations) が id ベースの参照に使用する、ロケールごとの辞書です。React、TanStack Start、Next.js Pages Router、React Native ではこの prop を受け入れます。Next.js App Router の provider は辞書を内部で読み込みます。

### `region` [#region]

**型** `string` · **任意**

現在のリージョンコード (例: `US`、`GB`) 。React、TanStack Start、Next.js Pages Router、React Native はこの prop を受け入れます。Next.js App Router はリクエストからリージョンを解決します。

### `enableI18n` [#enable-i18n]

**型** `boolean` · **任意** · **デフォルト** `true`

コンテンツを翻訳するかどうかを指定します。`false` の場合、プロバイダーはソースロケールのコンテンツを表示します。React、TanStack Start、Next.js Pages Router、React Native はこの prop を受け付けます。Next.js App Router はリクエスト状態から値を解決します。

### `fallback` [#fallback]

**型** `ReactNode` · **任意**

翻訳の読み込み中に表示されるReact Native専用のコンテンツです。デフォルトでは、中央に配置されたReact Nativeの`ActivityIndicator`が表示されます。

### `_reload` [#reload]

**型** `(state: { locale: string; region: string | undefined; enableI18n: boolean }) => void` · **任意** · **既定値** フレームワーク固有

Web のロケール、リージョン、または翻訳状態が変更された後に呼び出されるコールバックです。React と TanStack Start では、共有プロバイダーを介して指定します。Next.js Pages Router では、ページ全体の再読み込みの代わりに `Router.push` を使用するために用います。

素の `gt-react` と Next.js Pages Router では、`window.location.reload` にフォールバックします。TanStack Start では、ロケールルーティングが有効な場合に pathname によるナビゲーションを提供します。Next.js App Router のプロバイダーは独自のコールバックを提供するため、この Prop は受け取りません。通常は `router.refresh` を呼び出しますが、デフォルトロケールへの切り替え後にミドルウェアがデフォルト以外のロケールプレフィックスを削除する必要がある場合は、ドキュメントを再読み込みします。React Native では代わりにプロバイダーの状態を更新します。

### `onMissingTranslation` [#missing-translation]

**型** `OnMissingTranslation` · **任意**

インラインまたは JSX の翻訳が見つからない場合に使用する高度なコールバックです。ブラウザおよび React Native のプロバイダーでは、指定したコールバックを使用できます。サーバーレンダリングされたプロバイダーは独自のハンドラーを設定します。

### `onMissingDictionaryEntry` [#missing-dictionary-entry]

**型** `OnMissingDictionaryEntry` · **任意**

辞書エントリが見つからない場合に使用する高度なコールバックです。ブラウザおよびReact Nativeのプロバイダーでは、指定したコールバックを使用できます。サーバーでレンダリングされるプロバイダーは独自のハンドラーを設定します。

### `onMissingDictionaryObj` [#missing-dictionary-object]

**型** `OnMissingDictionaryObj` · **任意**

辞書オブジェクトが見つからない場合に使用する高度なコールバックです。ブラウザおよびReact Nativeのプロバイダーでは、指定したコールバックを使用できます。サーバーでレンダリングされるプロバイダーには、独自のハンドラーが設定されます。

## Sitemap

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