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を使うと、本番環境のアプリで翻訳の読み込み方法をカスタマイズできます。- 最も一般的なユースケースは、ローカルの翻訳 を追加することです
次の手順
このガイドはいかがですか?