loadTranslations
loadTranslations() 関数のAPIリファレンス
概要
loadTranslations を使用して、翻訳の読み込み方法を指定します。
デフォルトでは、本番環境でアプリは GT CDN（Content Delivery Network）から翻訳を読み込みます。
別のソースから翻訳を読み込むために、loadTranslations 関数を指定できます。例:
- アプリのバンドルから（最も一般的）
- データベースから
- API から
- 別の CDN から
アプリのバンドル内のローカルファイルから翻訳を読み込むための統合サポートを用意しています。 Next.js アプリでローカルの翻訳を設定するには、このガイドに従ってください。
独自の翻訳を手動で定義したい場合は、カスタム翻訳ガイド と loadDictionary 関数を参照してください。
リファレンス
パラメータ
Prop
Type
説明
| 種類 | 説明 |
|---|---|
locale | 翻訳を読み込む対象のlocale。 |
戻り値
指定された locale に対して、id を翻訳に対応付けた dictionary を返す Promise<any>。
セットアップ
src/ ディレクトリまたはプロジェクトルートにある loadTranslations.js または loadTranslations.ts というファイルで、loadTranslations をデフォルトエクスポートとして定義します。
関数は、指定された locale の翻訳を含むオブジェクトに解決される Promise を返すようにしてください。
export default async function loadTranslations(locale) {
const translations = await import(`../public/locales/${locale}.json`);
return translations.default;
};別の名前やパスを使いたい場合は、withGTConfig の loadTranslationsPath パラメータに相対パスを渡してください。
例
バンドルから翻訳をフェッチする
export default async function loadTranslations(locale) {
const translations = await import(`../public/locales/${locale}.json`);
return translations.default;
};ローカルの翻訳を使用するように構成すると、gtx-cli translate コマンドは
プロジェクトのファイルツリー内に翻訳を保存します。
npx gtx-cli translateCDN（コンテンツ配信ネットワーク）から翻訳をロードする
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 {};
}
};自前のデータベースから翻訳を読み込む
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を使うと、本番環境のアプリで翻訳の読み込み方法をカスタマイズできます。- 最も一般的なユースケースは、ローカルの翻訳 を追加することです。
次のステップ
このガイドはどうでしたか？