# General Translation React SDKs (gt-react, gt-next): 翻訳をローカルに保存する
URL: https://generaltranslation.com/ja/docs/react/guides/storing-translations.mdx
---

title: 翻訳をローカルに保存する
description: React、Next.js、TanStack Start、React Native で、CDN から読み込む代わりに General Translation の翻訳をアプリにバンドルする方法。
related:
  links:
    - /docs/react/guides/configuring
    - /docs/react/guides/developing-spa-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/translating-jsx

---

デフォルトでは、General Translation は実行時に CDN から翻訳を読み込みます。代わりに、翻訳ファイルを生成してアプリにバンドルし、自分で読み込むこともできます。これにより実行時の CDN 依存はなくなりますが、翻訳を更新するたびに再デプロイが必要になります。

## ローカル出力パスを設定する [#configure]

`gt.config.json` で、`[locale]` プレースホルダーを使って、`gt` ファイルの出力先をソース内のパスに設定します。これはどのフレームワークでも共通です。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": { "gt": { "output": "src/_gt/[locale].json" } }
}
```

## ファイルを生成する [#generate]

CLI を実行してコンテンツを翻訳し、そのパスにロケールごとのファイルを 1 つずつ書き出します。

```bash
npx gt translate
```

ファイルを常に最新の状態に保てるよう、これをビルドに組み込んでください。たとえば、`"build": "npx gt translate && vite build"` (または `next build`、`expo export` など) です。

## アプリで読み込む [#load]

ロケールごとのファイルをインポートする [`loadTranslations`](/docs/react/reference/functions/load-translations) コールバックを用意します。設定方法はフレームワークによって異なります。

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    初期化時に `loadTranslations` を渡します。

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

  <Tab value="Next.js">
    project root に `loadTranslations.ts` ファイルを作成します。`withGTConfig` プラグインがこれを自動検出します (または `loadTranslationsPath` を明示的に設定します) 。

    ```ts title="loadTranslations.ts"
    export default async function loadTranslations(locale: string) {
      const t = await import(`./_gt/${locale}.json`);
      return t.default;
    }
    ```

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

    export default withGTConfig(nextConfig, { loadTranslationsPath: './loadTranslations.ts' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    初期化時に `loadTranslations` を渡します。

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

  <Tab value="React Native">
    初期化時に `loadTranslations` を渡します。

    ```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>

ローカルローダーを使うと、翻訳はバンドルから読み込まれ、CDN へのリクエストは行われません。CDN 配信に戻すには、ローダーを削除し、代わりに `projectId` を指定してください ([General Translation を設定する](/docs/react/guides/configuring#delivery) を参照) 。
## Next steps

- /docs/react/guides/configuring
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/translating-jsx