Components
GTProvider
<GTProvider> コンポーネントの APIリファレンス
概要
<GTProvider> コンポーネントは、その children に General Translation (GT) のコンテキストを提供し、翻訳済みコンテンツにアクセスできるようにします。
これは、アプリケーションでのクライアントサイドの翻訳に必須です。
使用するタイミング
- クライアント側で翻訳を有効にするため、アプリケーション全体を
<GTProvider>でラップします。 - dictionary を扱う場合は、必要に応じて
idを指定してクライアントに送る dictionary データを絞り込み、大規模な dictionary でのパフォーマンスを最適化します。 <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>コンポーネントについて詳しく学ぶ。
このガイドはいかがですか?