<GTProvider>

概要

<GTProvider> コンポーネントは、その子要素にGeneral Translation (GT) コンテキストを提供し、翻訳されたコンテンツにアクセスできるようにします。アプリケーションでクライアントサイドの翻訳を行うために必要です。

使用する場面

アプリケーション全体を <GTProvider> でラップして、クライアントで翻訳を有効にします。
辞書を使用する際は、オプションで id を指定してクライアントに送信される辞書データを制限し、大きな辞書のパフォーマンスを最適化できます。
<GTProvider> コンポーネントは、インライン <T> と辞書の両方で使用されます。

リファレンス

プロパティ

Prop	Type	Default
`id??`	`string`	`undefined`
`children?`	`ReactNode`	-

説明

プロパティ	説明
`children`	クライアントサイドで翻訳や翻訳情報へのアクセスが必要な、任意のコンポーネントまたはその親コンポーネント。これには `<T>`、`useGT`、その他の翻訳ユーティリティを使用するコンポーネントが含まれる必要があります。
`id?`	クライアントに送信するデータを制限するためのネストされた辞書のID。大規模な辞書を持つ大規模プロジェクトで役立ちます。

戻り値

このコンポーネントに渡された children を含む JSX.Element|undefined を返します。

例

基本的な使い方

アプリケーション全体を <GTProvider> でラップして、翻訳コンテキストをアプリに提供します。

layout.js

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` プロップの使用

id プロップを指定することで、辞書の一部のみをクライアントに送信し、パフォーマンスを最適化できます。

layout.js

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> コンポーネントについて詳しく学びましょう。
高度なカスタマイズオプションについては、withGTConfig() のドキュメントをご覧ください。

<GTProvider>

このページについて