# gt-next: General Translation Next.js SDK: ローカル翻訳の保存
URL: https://generaltranslation.com/ja/docs/next/guides/local-tx.mdx
---
title: ローカル翻訳の保存
description: CDNを使わず、翻訳をアプリのバンドルに含めて保存します
---

## ローカル翻訳とは？

ローカル翻訳は、CDN (Content Distribution Network) から取得するのではなく、アプリのバンドル内に保存される翻訳です。ビルドプロセスに `gt translate` コマンドを追加すると、JSON 形式の翻訳が生成されます。最後のステップは、それらの翻訳をアプリ内で使えるように組み込むことです。

これを行う方法は 2 つあります。

1. **アプリのバンドル内** (ローカル) : 生成後の翻訳をアプリのバンドルに保存する
2. **CDN** (デフォルト) : runtime に CDN から翻訳を取得する

デフォルトでは、`gt-next` は General Translation の CDN から翻訳を取得します。API を使ってアプリを翻訳すると、翻訳は自動的に CDN に保存されます。

<Callout>
  **デフォルトの動作:** GT はデフォルトで CDN ストレージを使用します。ローカルストレージに切り替えるのは、その特有の利点が必要な場合だけにしてください。
</Callout>

## トレードオフ

### ローカル翻訳の利点

* **読み込み時間の短縮**: ローカル翻訳はアプリから直接配信されるため、CDN経由で配信される翻訳よりも高速に読み込まれます
* **外部サービスに依存しない**: アプリで翻訳を読み込めるかどうかがCDNの稼働状況に左右されることはありません。あるロケールの翻訳が見つからない場合は、アプリが自動的にデフォルト言語にフォールバックします
* **オフラインでも動作**: 翻訳はアプリにバンドルされています

### ローカル翻訳のデメリット

* **バンドルサイズの増加**: ローカル翻訳を使うとアプリのバンドルサイズが大きくなり、初回読み込みが遅くなる可能性があります
* **コンテンツ管理**: 翻訳を編集するたびに、新しい翻訳を含めてアプリを再デプロイする必要があります

## セットアップ

### ステップ 1: 読み込み関数を作成する

`./src` 配下に、以下の内容で `loadTranslations.[js|ts]` ファイルを追加します。

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

[`withGTConfig`](/docs/next/api/config/with-gt-config) は、`src/` ディレクトリまたはプロジェクトルートにある `loadTranslations.[js|ts]` ファイルを自動的に検出します。


### ステップ 2: CLI を設定

設定コマンドを実行し、ローカルストレージを選択します。

```bash
npx gt configure
```

プロンプトが表示されたら:

* **CDN に保存しますか？** `No` を選択します
* **翻訳ディレクトリ:** `./public/_gt` を入力します

または、`gt.config.json` ファイルを手動で設定してローカル翻訳を使用することもできます。詳しくは、[CLI Configuration docs](/docs/cli/reference/config)を参照してください。


### ステップ 3: 翻訳を生成する

これで、translate コマンドを実行すると、翻訳が自動的にダウンロードされ、コードベースに組み込まれます。

```bash
npx gt translate
```

翻訳は `public/_gt/` に保存され、アプリにバンドルされます。


## ビルドへの統合

### Next.js のビルドプロセス

ビルドスクリプトに翻訳生成を追加します。

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### CI/CD パイプライン

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## よくある問題

### 翻訳ファイルが見つからない

ビルド前に翻訳が生成されていることを確認してください。

```bash
# ❌ 翻訳なしでビルド
<...YOUR_BUILD_COMMAND...>

# ✅ 先に翻訳を生成する
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### インポートパスのエラー

`読み込み` 関数では、ディレクトリ構造に合わせてください。

```ts
// ❌ 誤ったパス
const t = await import(`../translations/${locale}.json`);

// ✅ public/_gt の正しいパス
const t = await import(`../public/_gt/${locale}.json`);
```


### バンドルサイズが大きい場合

多数の言語を扱うアプリでは、コード分割を検討してください。

```ts
// 必要なときのみ翻訳を読み込む
export default async function loadTranslations(locale: string) {
  // ロケールがアクティブな場合のみ読み込む
  if (locale === getCurrentLocale()) {
    const translations = await import(`../public/_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  ローカルストレージは、翻訳内容が安定していて頻繁な更新が不要なアプリに最適です。
</Callout>


## 次のステップ

* [Middleware ガイド](/docs/next/guides/middleware) - 言語の検出とルーティング
* [Languages ガイド](/docs/next/guides/languages) - サポートする言語を設定
* API リファレンス: