<T>

<T> is the translation tag in gt-next. Children of <T> will be translated into your configured languages.

It requires two props:

• id, which is a unique string representing the content
• children, which is the content to translate

For example, the following code would translate the content "Hello, world" with the id "greeting".

import { T } from 'gt-next'
 
export default function Page() {
    return (
        <T id="greeting">
            Hello, world
        <T>
    )
}

The above would display "Hello, world" in the English version of the app, and "Hola mundo" in the Spanish version.

The <T> component can also contain JSX, like:

import { T } from 'gt-next'
import CustomButton from './CustomButton'
 
export default function Page() {
    return (
        <T id="jsx">
            <div>
                <p>Hello, world!</p>
                <CustomButton>This is a complex button!</CustomButton>
            </div>
        <T>
    )
}

<T> uses our cloud services to create and cache translations. If a translation is unavailable, <T> will default to displaying the content in your default locale (defaultLocale), usually English.

On-demand translation

Testing <T> in server components is easy, just change your browser language and reload the page. Translations will be created on-demand and load in within a few seconds.

Adding context to translations

Variables

Plurals