<T>

Overview

This doc will go over inline translation components, like <T>. We will look at some examples and explain common design practices. If you want to try out the <T> component in your Next.js app, check out our Quickstart Guide.

The <T> Component

The <T> Component is a powerful and simple translation component. No need to rewrite your components, just wrap JSX content in a <T> tag and it will be translated.

Let's translate this component:

import { T } from 'gt-next'; 
 
export default function MyComponent() {
  return (
    <T id='my_id'>
      <h1> List of Shakespeare Plays: </h1>
      <ul>
        <li> Hamlet </li>
        <li> A Midsummer Night's Dream </li>
        {/* ... */}
        <li> Macbeth </li>
      </ul>
      The End!
    </T> 
  );
}

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

Props

There are two required 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.

Supporting JSX Content

The <T> component can also translate JSX structures:

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>
  )
}

Adding context to translations

You can add additional context to your translations to refine their output. Context helps resolve ambiguities in content, ensuring accurate translations.

import { T } from 'gt-next';
 
export default function ContextExample() {
  return (
    <T id='greeting' context='formal'>
      Hello, world
    </T>
  );
}

In this example, the context prop specifies that the greeting should be translated formally.

On-Demand translation

One of the benefits of using gt-next is the ability to translate content on-demand. This means you can change the language of your app without rebuilding your app.

You can see this happening in development mode. You can change your browser language and reload the page. Translations will be created on-demand and displayed in the new language within a few seconds.

Fallback behavior

<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 (basically whatever language you are developing in). By default, it is set to English, but you can configure your default locale here.

Variables

Dynamic variables can be injected into translations using components like <Var>. These placeholders allow you to pass values such as user names or dates into the translation dynamically.

import { T, Var } from 'gt-next';
 
export default function DynamicGreeting({ user }) {
  return (
    <T id='greeting'>
      Hello, <Var name='name' value={user.name} />!
    </T>
  );
}

Plurals

The <T> component supports pluralization with the <Plural> component, allowing dynamic rendering of singular or plural forms based on a count.

import { T, Num, Plural } from 'gt-next';
 
export default function ItemCount({ count }) {
  return (
    <T id='item_count'>
      <Plural
        n={count}
        one={
          <>
            You have <Num>{count}</Num> item.
          </>
        }
        other={
          <>
            You have <Num>{count}</Num> items.
          </>
        }
      />
    </T>
  );
}

Notes

• Ensure every <T> component has a unique id for accurate translations.
• Wrap your app with a <GTProvider> to enable translations in client components.
• Combine <T> with Variable Components and Branching Components for more complex translation scenarios.

Next Steps

• Learn about setting up translations alternate design patterns such as Template Dictionaries.
• Explore other localization techniques like i18n Configuration and i18n Routing.