loadTranslations()

概要

loadTranslations() を使用して、翻訳の読み込み動作を指定します。デフォルトでは、アプリは本番環境で GT CDN から翻訳を読み込みます。異なるソースから翻訳を読み込むために loadTranslations() 関数を指定することができます。例えば：

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

アプリのバンドル内のローカルファイルから翻訳を読み込むためのサポートを統合しています。 Next.js アプリでローカル翻訳を設定するには、このガイドに従ってください。

独自の翻訳を手動で定義したい場合は、カスタム翻訳ガイドと loadDictionary() 関数をチェックしてください。

リファレンス

パラメータ

Prop	Type	Default
`locale?`	`string`	-

説明

タイプ	説明
`locale`	翻訳を読み込むべきロケール。

戻り値

指定されたロケールの翻訳をidにマッピングする辞書に解決されるPromise<any>。

セットアップ

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

src/loadTranslations.js

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

異なる名前やパスを使用したい場合は、withGTConfig() の loadTranslationsPath パラメータを通じて相対パスを渡してください。

例

バンドルから翻訳を取得する

src/loadTranslations.js

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

ローカル翻訳を使用するように設定されている場合、gtx-cli translateコマンドは、翻訳をプロジェクトのファイルツリーに保存します。

このコマンドを使用してバンドルの翻訳ファイルを取得できます:

npx gtx-cli translate --no-publish --translations-dir ./public/locales

CDNから翻訳をロードする

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 {};
  }
};

独自のデータベースから翻訳をロードする

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 {};
  }
};

質問: loadTranslations()とloadDictionary()の違いは何ですか？

loadTranslations()は、アプリの翻訳を取得するためのカスタムロード動作を定義するために使用されます。これは、CDN、データベース、またはアプリのバンドルから翻訳を取得することができます。これらは通常、CLIツールによって管理される機械生成の翻訳であり、編集があまりユーザーフレンドリーではありません。
loadDictionary()は、gt-nextをスタンドアロンライブラリとして実装するために意図されています。ユーザーは独自の翻訳を持ち込み、翻訳インフラストラクチャは使用されません。

メモ

loadTranslations() は、アプリで翻訳をどのように読み込むかをカスタマイズする機能を提供します。
最も一般的な使用例は、ローカル翻訳を追加することです。

次のステップ

ローカル翻訳を使用する理由について学ぶ
カスタム翻訳ガイドを使用して独自の翻訳を追加する

loadTranslations()

このページについて