# gt-next: General Translation Next.js SDK: T
URL: https://generaltranslation.com/en-GB/docs/next/api/components/t.mdx
---
title: T
description: API reference for the T component
---

## Overview

The `<T>` component is the main translation method in `gt-next`.

```jsx
<T>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</T>
```

The `<T>` component supports translating plain text as well as complex JSX structures.
Additionally, it provides features for handling variables, plurals, and context-specific translations.

<Callout>
  **Build-time Translation:**
  `<T>` translations occur at build time.
  This means translation happens before deployment to reduce latency.
  Make sure to follow the [deployment guide here](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Reference

### Props

<TypeTable
  type={{
"children": {
    type: 'any',
    optional: false,
},
"id?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
"context?": {
    type: 'string',
    optional: true,
    default: 'undefined',
},
}}
/>

### Descriptions

| Prop       | Description                                                                                                     |
| ---------- | --------------------------------------------------------------------------------------------------------------- |
| `children` | The content to be translated. This can include plain text or JSX structures.                                    |
| `id`       | An optional unique identifier for the translation string. If not provided, one is auto-generated at build time. |
| `context`  | Additional context to help refine the translation. Useful for resolving ambiguous phrases.                      |

### Returns

`React.JSX.Element|undefined` that contains the rendered translation or fallback content based on the supplied configuration.

***

## Behaviour

### Production

During the CD process, any children inside a `<T>` will be translated before your application is deployed.
This ensures fast load times for all locales, but it can only translate content known at build time.

Once generated, translations are either (1) stored in the CDN or (2) stored in your app&#39;s build output, according to your configuration.
From there, the translated content is served to your users.
If a translation is not found, it will fall back to the original content.

Make sure to follow the [deployment guide here](/docs/next/tutorials/quickdeploy).

### Development

During development, the `<T>` function will translate content on-demand.
This is useful for prototyping how your app will look in different languages.
Remember to add a Dev API key to your environment to enable this behaviour.

While loading, `<T>` will return undefined unless the languages are similar (en-US vs en-GB), though this behaviour can be customised with render settings.
If an error occurs, `<T>` will return the original content.

You will see a delay during on-demand translation in development.
This delay will not occur in production builds unless content is explicitly being translated on-demand,
i.e. by using [`<Tx>`](/docs/next/api/components/tx) or [`tx`](/docs/next/api/strings/tx).

***

## Examples

### Basic usage

The `<T>` will translate its children.

```jsx title="SimpleTranslation.jsx" copy
import { T } from 'gt-next';

export default function Greeting() {
    return (
        <T>
            Hello, world!
        </T>
    );
}
```


### With variables

You can use the `<Var>` component to mark children as variables.
This allows you to mark content that should not be translated.
Usually, `<Var>` components wrap dynamic content.

```jsx title="DynamicGreeting.jsx" copy
import { T, Var } from 'gt-next';

export default function DynamicGreeting(user) {
    return (
        <T>
            Hello, <Var>{user.name}</Var>!
        </T>
    );
}
```


### With plurals

The `<T>` component also supports pluralisation using the `<Plural>` component.

```jsx title="ItemCount.jsx" copy
import { T, Plural } from 'gt-next';

export default function ItemCount({ count }) {
    return (
        <T>
            <Plural n={count} 
                one={<>You have an item.</>} 
                other={<>You have items.</>} 
            />
        </T>
    );
}
```


### Limitations

The `<T>` component does not translate dynamic content.

```jsx title="DynamicContent.jsx" copy
import { T } from 'gt-next';

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* will create an error */}
        </T>
    );
}
```

The `<T>` function translates its descendants.

```jsx title="Example.jsx" copy
import { T } from 'gt-next';

const ValidTranslation = ({ children }) => (<div><b>{children}</b></div>);

const InvalidTranslation = ({ children }) => (<div><b>No translation</b></div>);

export default function Example() {
    return (
        <T>
            { /* [!code highlight] */}
            <div><b>This is valid!</b></div> {/* will be translated */}

            
            <ValidTranslation>
            { /* [!code highlight] */}
                Hello, world!  {/* will be translated */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* will not be translated */}
        </T>
    );
}
```

<Callout>
  **Note:** A good rule of thumb is that any content that is *literally* between the two `<T>`s in the file will be translated.
  You can always add another `<T>` to translate content that isn&#39;t being translated, though nesting `<T>` components is not recommended.
</Callout>

***


## Notes

* The `<T>` component is designed for translating content in your application. It is the primary method for localisation in `gt-next`.
* Use the `<T>` component to translate plain text or JSX structures, including variables and pluralisation.
* If you use the `<T>` component on the client side, make sure it is wrapped in a [`<GTProvider>`](/docs/next/api/components/gtprovider) to access the translation context.

## Next steps

* For on-demand translations, look into the [`<Tx>`](/docs/next/api/components/tx) component.
* For more advanced features, see the [`<T>` reference](/docs/next/guides/t).
* For translating strings, look into [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt), and [`useGT`](/docs/next/api/strings/use-gt).