Config
loadTranslations
loadTranslations() 関数の APIリファレンス。
概要
loadTranslations 関数は、翻訳の読み込み方法をカスタマイズするための主要な手段です。
本番環境では、アプリでレンダリングできるように翻訳を保存しておく必要があります。
デフォルトでは、翻訳は GT CDN に保存されます。
loadTranslations 関数を指定すると、次のような別のソースから翻訳を取得できます:
- アプリのバンドルから（最も一般的）
- データベースから
- API から
- 別の CDN から
アプリのバンドル内のローカルファイルから翻訳を読み込むための統合サポートを提供しています。 React アプリでローカルの翻訳をセットアップするには、このガイドに従ってください。
リファレンス
パラメータ
Prop
Type
説明
| 種別 | 説明 |
|---|---|
locale | 翻訳を読み込む対象のlocale。 |
戻り値
指定した locale の翻訳を含む文字列または JSX オブジェクトのいずれかに解決される Promise<any>。
セットアップ
loadTranslations 関数をインポートし、<GTProvider> コンポーネントの prop に渡してください。
import loadTranslations from './loadTranslations';
createRoot(document.getElementById("root")!).render(
<StrictMode>
<GTProvider locales={['es', 'fr']} loadTranslations={loadTranslations}> // [!code highlight]
<App />
</GTProvider>
</StrictMode>
);例
ローカルファイルから翻訳を読み込む
ローカルの翻訳を使用するように設定されている場合、gtx-cli translate コマンドによって、翻訳は ./src/_gt ディレクトリに保存されます。
export default async function loadTranslations(locale) {
const translations = await import(`./_gt/${locale}.json`);
return translations.default;
};独自のCDN（コンテンツ配信ネットワーク）から翻訳を読み込む
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は、本番環境のアプリで翻訳の読み込み方法をカスタマイズできるようにします。- 最も一般的な用途は、ローカルの翻訳 を追加することです
次の手順
このガイドはどうでしたか？