# gt-next: General Translation Next.js SDK: GTProvider URL: https://generaltranslation.com/ja/docs/next/api/components/gtprovider.mdx --- title: GTProvider description: GTProvider コンポーネントのAPIリファレンス --- ## 概要 `` コンポーネントは、子要素に General Translation (GT) のコンテキストを提供し、翻訳されたコンテンツにアクセスできるようにします。アプリケーションでクライアントサイド翻訳を行うには、このコンポーネントが必要です。 ### 使用する場面 * クライアント側で翻訳を有効にするには、アプリケーション全体を `` でラップします。 * 辞書を使用する場合は、必要に応じて `id` を指定し、クライアントに送信する辞書データを制限することで、大規模な辞書でのパフォーマンスを最適化できます。 * `` コンポーネントは、[インライン ``](/docs/next/guides/t) と [辞書](/docs/next/guides/dictionaries) の両方で使用します。 ## リファレンス ### プロパティ ### 説明 | プロパティ | 説明 | | ---------- | ---------------------------------------------------------------------------------------------------------------- | | `children` | クライアント側で翻訳を行う、または翻訳情報にアクセスする必要がある任意のコンポーネント、あるいはその親コンポーネントです。``、`useGT`、またはその他の翻訳ユーティリティを使用するコンポーネントを含めてください。 | | `id?` | クライアントに送信するデータを制限するための、ネストされた辞書の ID です。大規模な辞書を扱うプロジェクトで役立ちます。 | | `locale?` | 任意のロケール上書きです。指定した場合、自動検出されたロケールではなく、こちらが使用されます。 | | `region?` | ロケール固有の書式設定のための、任意の地域上書きです。 | ### 戻り値このコンポーネントに渡された children を含む `JSX.Element|undefined`。 ## 例 ### 基本的な使い方アプリに翻訳コンテキストを提供するには、アプリケーションを `` で囲みます。 ```jsx title="layout.js" copy import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return ( // [!code highlight] {children} // [!code highlight] ); } ``` ### サブセットに `id` prop を使用する `id` prop を指定すると、クライアントに送信する辞書をサブセットのみに絞って、パフォーマンスを最適化できます。 ```jsx title="layout.js" copy import { GTProvider } from 'gt-next'; export default function RootLayout({ children }) { return ( // [!code highlight] {children} ); } ``` *** ## 注意事項 * クライアントコンポーネントでは、`` で `` コンポーネントおよびその他の翻訳関連コンポーネントをすべてラップする必要があります。詳しくは[こちら](/docs/next/guides/t)を参照してください。 * サーバーサイド翻訳では、`` は必須ではありませんが、使用することはできます。 ## 次のステップ * テキストやコンポーネントの翻訳に使う[`` コンポーネント](/docs/next/guides/t)について詳しく確認してください。