<GTProvider>

Overview

The <GTProvider> component provides General Translation (GT) context to its children, enabling them to access translated content. It is required for any client-side translations on your application.

When to Use

Wrap your entire application in <GTProvider> to enable translations on the client.
When working with dictionaries, optionally specify an id to limit the dictionary data sent to the client, optimizing performance for large dictionaries.
The <GTProvider> component is used for both inline <T> and dictionary design patterns.

Reference

Props

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

Description

Prop	Description
`children`	Any component or the parents of any component that needs to translate or access translation information on the client side. These should include any components using `<T>`, `useGT`, or other translation utilities.
`id?`	The ID of a nested dictionary to limit the data sent to the client. This is useful for large projects with extensive dictionaries.

Returns

JSX.Element|undefined containing the children that were passed to this component.

Example

Basic Usage

Wrap your application in <GTProvider> to provide translation context to your app.

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider>
                    {children}
                </GTProvider>
            </body>
        </html>
    );
}

Using the `id` Prop for Subsets

Specify the id prop to optimize performance by sending only a subset of the dictionary to the client.

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <GTProvider id="nested.dictionary.key">
                    {children}
                </GTProvider>
            </body>
        </html>
    );
}

Notes

The <GTProvider> must wrap all <T> components and other translation-related components in client components. Read more about it here.
For server-side translations, <GTProvider> is not required but can still be used.

Next Steps

Learn more about the <T> component for translating text and components.
See i18n configuration for advanced customization options.

<GTProvider>

On this page