# gt-next: General Translation Next.js SDK: T
URL: https://generaltranslation.com/fr/docs/next/api/components/t.mdx
---
title: T
description: Référence API du composant T
---

## Vue d’ensemble

Le composant `<T>` est la principale méthode de traduction de `gt-next`.

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

Le composant `<T>` prend en charge la traduction de texte brut ainsi que de structures JSX complexes.
Il offre également des fonctionnalités pour gérer les variables, les pluriels et les traductions selon le contexte.

<Callout>
  **Traduction au moment du build :**
  Les traductions avec `<T>` s’effectuent au moment du build.
  Cela signifie que la traduction a lieu avant le déploiement afin de réduire la latence.
  Veillez à suivre le [guide de déploiement ici](/docs/next/tutorials/quickdeploy).
</Callout>

***


## Référence

### Propriétés

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

### Description

| Prop       | Description                                                                                                                                                          |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | Le contenu à traduire. Il peut inclure du texte brut ou des structures JSX.                                                                                          |
| `id`       | Un identifiant unique facultatif pour la chaîne de traduction. S&#39;il n&#39;est pas fourni, un identifiant est généré automatiquement au moment du build. |
| `context`  | Un contexte supplémentaire pour affiner la traduction. Utile pour lever les ambiguïtés.                                                                              |

### Renvoie

`React.JSX.Element|undefined` contenant la traduction affichée ou le contenu de repli, selon la configuration fournie.

***

## Comportement

### Production

Pendant le processus de CD, tout enfant à l’intérieur d’un `<T>` est traduit avant le déploiement de votre application.
Cela garantit des temps de chargement rapides pour tous les paramètres régionaux, mais ne permet de traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) stockées dans la sortie de build de votre application, selon votre configuration.
Le contenu traduit est ensuite servi à vos utilisateurs.
Si aucune traduction n’est trouvée, le contenu d’origine est utilisé par défaut.

Veillez à suivre le [guide de déploiement ici](/docs/next/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `<T>` traduit le contenu à la demande.
C&#39;est utile pour prototyper l&#39;apparence de votre application dans différentes langues.
N&#39;oubliez pas d&#39;ajouter une clé API de développement à votre environnement pour activer ce comportement.

Pendant le chargement, `<T>` renvoie undefined, sauf si les langues sont proches (en-US vs en-GB), bien que ce comportement puisse être personnalisé avec les paramètres de rendu.
Si une erreur se produit, `<T>` renvoie le contenu d&#39;origine.

Vous constaterez un délai lors de la traduction à la demande en développement.
Ce délai ne se produira pas dans les builds de production, sauf si le contenu est explicitement traduit à la demande,
c&#39;est-à-dire en utilisant [`<Tx>`](/docs/next/api/components/tx) ou [`tx`](/docs/next/api/strings/tx).

***

## Exemples

### Utilisation de base

Le composant `<T>` traduit ses enfants.

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

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


### Avec des variables

Vous pouvez utiliser le composant `<Var>` pour marquer ses enfants comme des variables.
Cela vous permet d’indiquer le contenu qui ne doit pas être traduit.
En général, les composants `<Var>` encapsulent du contenu dynamique.

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

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


### Avec les pluriels

Le composant `<T>` prend également en charge la gestion du pluriel à l’aide du composant `<Plural>`.

```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

Le composant `<T>` ne traduit pas le contenu qui est dynamique.

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

export default function DynamicContent({greeting}) {
    return (
        <T>
            {greeting} {/* génèrera une erreur */}
        </T>
    );
}
```

La fonction `<T>` traduit les éléments qu’elle contient.

```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> {/* sera traduit */}

            
            <ValidTranslation>
            { /* [!code highlight] */}
                Hello, world!  {/* sera traduit */}
            </ValidTranslation> 

            <InvalidTranslation /> {/* ne sera pas traduit */}
        </T>
    );
}
```

<Callout>
  **Remarque :** En règle générale, tout contenu situé *littéralement* entre les deux balises `<T>` du fichier sera traduit.
  Vous pouvez toujours ajouter un autre `<T>` pour traduire le contenu qui ne l’est pas, même s’il n’est pas recommandé d’imbriquer des composants `<T>`.
</Callout>

***


## Remarques

* Le composant `<T>` est conçu pour traduire le contenu de votre application. C’est la principale méthode de localisation dans `gt-next`.
* Utilisez le composant `<T>` pour traduire du texte brut ou des structures JSX, y compris avec des variables et la gestion du pluriel.
* Si vous utilisez le composant `<T>` côté client, assurez-vous qu’il est enveloppé dans un [`<GTProvider>`](/docs/next/api/components/gtprovider) afin d’accéder au contexte de traduction.

## Étapes suivantes

* Pour les traductions à la demande, consultez le composant [`<Tx>`](/docs/next/api/components/tx).
* Pour des fonctionnalités plus avancées, consultez la [documentation de référence de `<T>`](/docs/next/guides/t).
* Pour traduire des chaînes, consultez [`tx`](/docs/next/api/strings/tx), [`getGT`](/docs/next/api/strings/get-gt) et [`useGT`](/docs/next/api/strings/use-gt).