Types
RuntimeTranslationOptions
RuntimeTranslationOptions 型のAPIリファレンス
概要
RuntimeTranslationOptions 型は、インライン翻訳に variables を渡し、そのレンダリング動作を指定するために使用します。
また、翻訳に別の言語を指定するために locale を追加することもできます。
これは tx 関数と併用します。
ランタイム翻訳:
変数をオンデマンドで翻訳するには、tx に渡す文字列内に直接含めてください。
options オブジェクト経由で tx に渡された variables は翻訳されません。
リファレンス
パラメータ
Prop
Type
説明
| Prop | 説明 |
|---|---|
variables | 各値を文字列内の該当箇所に対応付けるためのキーを持つオブジェクト。 |
$locale | 翻訳に使用する locale を指定するため、任意で variables オブジェクトに $locale を変数として含めます。指定しない場合は、アプリがサポートする中でブラウザの最優先の locale が使用されます。 |
例
変数の受け渡し
文字列に変数を挿入するには、{variable-name} という構文を使います。変数名を波かっこで囲みます。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{tx(`こんにちは、{username}！`,{ username: 'Brian123' })}
</div>;
};ICU message format を使う
gt-next は ICU message format に対応しており、variables の値もフォーマットできます。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>
{ tx(
'アカウント残高: {dollars, number, ::currency/USD}',
{
"dollars" : 1000000,
}
) }
</div>;
};variables を翻訳する
変数を翻訳するには、tx に渡す文字列内にそのまま記述してください。
import { tx } from 'gt-next/server';
const Component = ({ hairColor }: { hairColor: string }) => {
return <div>{tx(
`こんにちは、{username}！あなたの髪の色は${hairColor}です`,
{ username: 'Brian123' }
)}</div>;
};変数 hairColor は翻訳されますが、username は翻訳されません。
locale の指定
翻訳に使用する locale を指定できます。
import { tx } from 'gt-next/server';
const Component = () => {
return <div>{tx('Hello, world!', { $locale: 'fr' })}</div>;
};これは必ずフランス語に翻訳されます。
注意事項
RuntimeTranslationOptionsは、実行時の文字列の翻訳に使用します。variablesオブジェクトは、テキストへ渡す値を保持します。variablesOptionsオブジェクトは、variables の挙動を定義します。
次のステップ
- インライン文字列の翻訳については
txを参照してください。 - フォーマット options の詳細は
ICU message formatを参照してください。
このガイドはどうでしたか？