Components
GTProvider
<GTProvider> コンポーネントのAPIリファレンス
概要
<GTProvider> コンポーネントは、子要素に General Translation (GT) のコンテキストを提供し、翻訳済みコンテンツへアクセスできるようにします。
アプリケーションでクライアントサイドの翻訳を行う場合は必須です。
使うタイミング
- クライアント側の翻訳を有効にするには、アプリケーション全体を
<GTProvider>でラップします。 - dictionaries を扱う際は、必要に応じて
idを指定してクライアントへ送る dictionary データを限定し、大規模な dictionaries におけるパフォーマンスを最適化します。 <GTProvider>コンポーネントは、インラインの<T>と dictionaries の両方で使用されます。
リファレンス
Props
Prop
Type
説明
| Prop | 説明 |
|---|---|
children | クライアント側で翻訳を行う、または翻訳情報へアクセスする必要がある任意のコンポーネント、もしくはその親コンポーネント。<T>、useGT、その他の翻訳ユーティリティを使用するコンポーネントを含めてください。 |
id? | クライアントに送信するデータを絞り込むための、ネストされた dictionary の id。dictionary が巨大な大規模プロジェクトで有用です。 |
戻り値
このコンポーネントに渡された children を含む JSX.Element | undefined。
例
基本的な使い方
アプリ全体を <GTProvider> でラップして、翻訳用のコンテキストを提供します。
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider> // [!code highlight]
{children}
</GTProvider> // [!code highlight]
</body>
</html>
);
}サブセットに id プロップを使う
パフォーマンスを最適化するため、クライアントには dictionary の必要なサブセットのみを送るように、id プロップを指定します。
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<GTProvider id="nested.dictionary.key"> // [!code highlight]
{children}
</GTProvider>
</body>
</html>
);
}注意事項
<GTProvider>は、クライアントコンポーネント内にあるすべての<T>コンポーネントおよび翻訳関連コンポーネントを必ず包む（ラップする）必要があります。詳しくはこちらをご覧ください。- サーバーサイドの翻訳では
<GTProvider>は必須ではありませんが、使用することもできます。
次のステップ
- テキストやコンポーネントを翻訳するための
<T>コンポーネント について詳しく学ぶ。
このガイドはどうでしたか？