loadTranslations()

概要

loadTranslations() を使用して、翻訳の読み込み方法を指定します。デフォルトでは、本番環境でアプリは GT CDN から翻訳を読み込みます。別のソースから翻訳を読み込む場合は、loadTranslations() 関数を指定できます。例えば：

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

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

独自の翻訳を手動で定義したい場合は、カスタム翻訳ガイドや loadDictionary() 関数をご覧ください。

リファレンス

パラメーター

Prop	Type	Default
`locale?`	`string`	-

説明

型	説明
`locale`	翻訳を読み込む対象のロケール。

戻り値

指定されたロケールのIDと翻訳のマッピングを含む Promise<any> が解決されます。

セットアップ

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

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

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()

このページについて