# General Translation React SDKs (gt-react, gt-next): GTProvider
URL: https://generaltranslation.com/ja/docs/react/reference/components/gt-provider.mdx
---

title: GTProvider
description: アクティブなロケールと翻訳を General Translation の gt-react コンポーネントツリーに提供します。GTProvider の API リファレンス。

---

`<GTProvider>` コンポーネントは、アクティブなロケールとその翻訳をサーバー レンダリングされた `gt-react` コンポーネントツリーに提供します。サーバーで翻訳を読み込み、それをクライアントに渡す場合に使用します。

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

*`gt-react`、`gt-next`、`gt-tanstack-start`、`gt-react-native` で利用できます。例では `gt-react` から import していますが、代わりにお使いのフレームワークのパッケージから import してください。*

*注: ロケールと翻訳が `<GTProvider>` に渡される方法は、フレームワークによって異なります。`gt-react` では props として渡します (以下を参照) 。`gt-next`、`gt-tanstack-start`、`gt-react-native` では、それぞれの setup を通じて解決されます。詳細は各フレームワークのセクションを参照してください。*

## 概要 [#overview]

[初期化](/docs/react/reference/config#initialization)の後、アプリを `<GTProvider>` でラップします。現在の `locale` と、そのロケールの `translations` を渡してください。これらは [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) で読み込みます。

```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)、および認証情報は `<GTProvider>` ではなく、[初期化呼び出し](/docs/react/reference/config#initialization)に指定します。プロバイダーは、解決済みのロケールと翻訳を同期的に受け取ります。*

<Callout type="info">
  **v11 での変更:** `gt-react` の `<GTProvider>` は、`config`、`loadTranslations`、`loadDictionary`、認証情報を受け付けなくなりました。これらは [初期化呼び出し](/docs/react/reference/config#initialization) に移し、代わりに解決済みの `locale` と `translations` ([`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) から取得) をプロバイダーに渡してください。
</Callout>

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

* **同期翻訳。** プロバイダーは `translations` を事前に必要とするため、翻訳済みコンテンツは読み込み時のちらつきなしに同期的にレンダリングされます。このオブジェクトは、初期化後に [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) を使って生成してください。
* **ツリー用のコンテキスト。** プロバイダーベースのセットアップでは、プロバイダー配下のコンポーネントは、アクティブなロケール、翻訳、辞書、リージョンをそこから参照します。
* **翻訳の切り替え。** `enableI18n` が `false` の場合、プロバイダーはソースロケールのコンテンツをレンダリングし、翻訳をスキップします。これは未翻訳のアプリをプレビューするのに便利です。

## Props [#props]

| Prop                            | 説明                                                                           | 型           | 任意  | デフォルト  |
| ------------------------------- | ---------------------------------------------------------------------------- | ----------- | --- | ------ |
| [`locale`](#locale)             | ツリーに対するアクティブなロケール。                                                           | `string`    | いいえ | —      |
| [`translations`](#translations) | アクティブなロケールの翻訳。                                                               | `object`    | いいえ | —      |
| [`dictionaries`](#dictionaries) | [`useTranslations`](/docs/react/reference/hooks/use-translations) 用のロケール別辞書。 | `object`    | はい  | —      |
| [`region`](#region)             | アクティブなリージョンコード。                                                              | `string`    | はい  | —      |
| [`enableI18n`](#enable-i18n)    | コンテンツを翻訳します。`false` の場合は、ソースロケールをレンダリングします。                                  | `boolean`   | はい  | `true` |
| [`children`](#children)         | アプリケーションツリー。                                                                 | `ReactNode` | はい  | —      |

### `locale` [#locale]

**型** `string` · **必須**

ツリーのアクティブなロケールです。`es` のような BCP 47 コードで指定します。下流では [`useLocale`](/docs/react/reference/hooks/use-locale) を使って参照できます。

### `translations` [#translations]

**Type** `object` · **必須**

アクティブなロケール向けの翻訳です。プロバイダー が同期的に利用する形式になっています。初期化後に [`getTranslationsSnapshot`](/docs/react/reference/functions/get-translations-snapshot) を使って生成してください。

### `dictionaries` [#dictionaries]

**型** `object` · **任意**

[`useTranslations`](/docs/react/reference/hooks/use-translations) が id ベースの参照に使用する、ロケールごとの辞書です。`<T>` と `useGT` のみを使用する場合は省略してください。

### `region` [#region]

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

現在のリージョンコード (例: `US`、`GB`) 。リージョン固有の書式設定や、リージョン用のフックおよびセレクターで使用されます。

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

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

コンテンツを翻訳するかどうかを指定します。`false` の場合、プロバイダーはソースロケールのコンテンツを表示し、翻訳は行いません。

### `children` [#children]

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

アプリケーションツリーです。プロバイダーベースのセットアップでは、翻訳を行ったりロケールの状態を読み取ったりするすべてのコンポーネントは、プロバイダー の配下にある必要があります。

## 例 [#examples]

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

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

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

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>
  );
}
```

```tsx
// 未翻訳（ソースロケール）のアプリをプレビューする
<GTProvider locale={locale} translations={translations} enableI18n={false}>
  <App />
</GTProvider>
```