Config
loadTranslations
loadTranslations() 関数の APIリファレンス。
概要
loadTranslations を使って、翻訳の読み込み方法を指定します。
デフォルトでは、本番環境でアプリは GT の CDN（コンテンツ配信ネットワーク）から翻訳を読み込みます。
別のソースから翻訳を読み込む場合は、loadTranslations 関数を指定できます。例:
- アプリのバンドル内（最も一般的）
- データベース
- API
- 別の CDN
アプリのバンドルに含まれるローカルの files から翻訳を読み込むための組み込みサポートを提供しています。 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を使うと、本番環境でアプリの翻訳読み込み方法をカスタマイズできます。- 最も一般的なユースケースは、ローカルの翻訳 を追加することです。
次のステップ
このガイドはいかがですか?