# gt-next: General Translation Next.js SDK: loadTranslations
URL: https://generaltranslation.com/ja/docs/next/api/config/load-translations.mdx
---
title: loadTranslations
description: loadTranslations() 関数の API リファレンス
---

## 概要

`loadTranslations` を使って、翻訳の読み込み方法を指定します。
デフォルトでは、本番環境でアプリは GT CDN から翻訳を読み込みます。
`loadTranslations` 関数を指定すると、たとえば次のような別のソースから翻訳を読み込めます。

* アプリのバンドルから (最も一般的) 
* データベースから
* API から
* 別の CDN から

アプリのバンドル内のローカルファイルから翻訳を読み込む機能が組み込まれています。
Next.js アプリでローカル翻訳を設定するには、[こちらのガイド](/docs/next/guides/local-tx)に従ってください。

独自の翻訳を手動で定義したい場合は、[カスタム翻訳ガイド](/docs/next/concepts/stand-alone)
と [`loadDictionary`](/docs/next/api/config/load-dictionary) 関数を参照してください。

## リファレンス

### パラメーター

<TypeTable
  type={{
  "locale": {
      type: 'string',
      optional: false,
  },
}}
/>

### 説明

| 型        | 説明           |
| -------- | ------------ |
| `locale` | 翻訳を読み込むロケール。 |

### 戻り値

指定されたロケールについて、ID から翻訳へのマッピングを格納した辞書に解決される `Promise<any>`。

***

## セットアップ

`src/` ディレクトリまたはルートに、`loadTranslations.js` または `loadTranslations.ts` という名前のファイルを作成し、そのデフォルトエクスポートとして `loadTranslations` を定義します。
この関数は、指定したロケールの翻訳を含むオブジェクトに解決される Promise を返すようにしてください。

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

別の名前やパスを使う場合は、[`withGTConfig`](/docs/next/api/config/with-gt-config) の `loadTranslationsPath` パラメータに相対パスを指定してください。

***


## 使用例

### バンドルから翻訳を読み込む

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

[ローカル翻訳](/docs/next/guides/local-tx) を使用するように設定すると、[`gt translate`](/docs/cli/translate) コマンドは
プロジェクトのファイルツリー内に翻訳を保存します。

```bash
npx gt translate
```


### CDN から翻訳を読み込む

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  try {
    const translations = await fetch(`https://your-cdn.com/translations/${locale}.json`);
    const data = await translations.json();
    return data;
  } catch (e) {
    console.error(e);
    return {};
  }
};
```


### 独自のデータベースから翻訳を読み込む

```js title="loadTranslations.js"
export default async function loadTranslations(locale) {
  try {
    const translations = await prisma.translation.findUnique({
      where: {
        locale: locale,
      },
    });
    return translations;
  } catch (e) {
    console.error(e);
    return {};
  }
};
```

<Callout>
  **質問:** [`loadTranslations`](/docs/next/api/config/load-translations) と [`loadDictionary`](/docs/next/api/config/load-dictionary) の違いは何ですか？

  * [`loadTranslations`](/docs/next/api/config/load-translations) は、アプリの翻訳を取得する際のカスタムの読み込み方法を定義するために使います。
    たとえば、CDN、データベース、またはアプリのバンドルから翻訳を取得できます。
    これらは通常、CLI ツールで管理される機械生成の翻訳で、ユーザーが編集しやすい形式ではありません。
  * [`loadDictionary`](/docs/next/api/config/load-dictionary) は、`gt-next` をスタンドアロンライブラリとして実装する場合を想定しています。
    ユーザーは独自の翻訳を用意し、翻訳インフラは使用しません。
</Callout>

***


## 注記

* `loadTranslations` を使うと、本番環境のアプリで翻訳の読み込み方法をカスタマイズできます。
* 最も一般的な用途は、[ローカル翻訳](/docs/next/guides/local-tx) を追加することです。

## 次のステップ

* [ローカル翻訳](/docs/next/guides/local-tx)を使う理由について確認する
* [カスタム翻訳ガイド](/docs/next/concepts/stand-alone)を参照して独自の翻訳を追加する