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

## Vue d’ensemble

Le composant `<Tx>` traduit le contenu jsx en runtime.

```jsx
{/* [!code highlight] */}
<Tx>
    Today, I went to
    {" the store"}
    <p>
        to <b>buy</b> some <i>groceries</i>.
    </p>
</Tx> // [!code highlight]
```

Le composant `<Tx>` 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 propres au contexte.
`<Tx>` est disponible uniquement côté serveur.

<Callout>
  **Traduction runtime :**
  Les traductions avec `<Tx>` s’effectuent au runtime.
  Cela signifie que la traduction est effectuée à la volée.
</Callout>

***


## Référence

### Props

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

### Descriptions

| Prop       | Description                                                                                                                                                                |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | L’élément enfant à traduire. Cela peut inclure du texte brut ou des structures JSX.                                                                                       |
| `context`  | Contexte supplémentaire pour affiner la traduction. Utile pour lever les ambiguïtés.                                                                                       |
| `locale`   | Un paramètre régional facultatif à utiliser pour la traduction. Par défaut, le paramètre régional préféré du navigateur pris en charge par votre application sera utilisé. |
| `maxChars` | Nombre maximal de caractères facultatif pour la traduction. La bibliothèque applique strictement cette limite.                                                             |

***

## Comportement

`<Tx>` traduit le JSX au runtime.
Cela signifie que les traductions sont effectuées à la volée, ce qui vous permet de traduire du contenu connu uniquement au runtime.
L’inconvénient, c’est qu’il faut attendre le chargement d’une traduction à la demande, ce qui est nettement plus lent.

Pendant le chargement, `<Tx>` 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.
En cas d’erreur, `<Tx>` renvoie le contenu d’origine.

Nous vous conseillons de traduire tout ce que vous pouvez au build avec [`<T>`](/docs/next/api/components/t), [`getGT`](/docs/next/api/strings/use-gt) ou [`useGT`](/docs/next/api/strings/use-gt),
et de n’utiliser les traductions à la demande, comme `<Tx>` et [`tx`](/docs/next/api/strings/tx), que lorsque c’est nécessaire.

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

***

## Exemples

### Utilisation de base

Le composant `<Tx>` traduit ses éléments enfants au runtime.

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

export default function Greeting() {
    return (
        {/* [!code highlight] */}
        <Tx>
            Hello, world!
        </Tx> // [!code highlight]
    );
}
```

### Avec des variables

Vous pouvez utiliser le composant `<Var>` pour marquer ses éléments enfants comme des variables.
Cela permet d’indiquer le contenu qui ne doit pas être traduit.

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

export default function DynamicGreeting(user) {
    return (
        <Tx>
            {/* [!code highlight] */}
            Hello, <Var>{user.name}</Var>
        </Tx>
    );
}
```

### 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 { Tx, Plural } from 'gt-next/server';

export default function ItemCount({ count }) {
    return (
        <Tx>
            <Plural n={count}  // [!code highlight] 
                one={<>You have an item.</>}  // [!code highlight] 
                other={<>You have items.</>}  // [!code highlight] 
            // [!code highlight]
            />  
        </Tx>
    );
}
```

### Limites

La fonction `<Tx>` traduit uniquement ses éléments enfants.

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

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

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

export default function Example() {
    return (
        <Tx>
            {/* [!code highlight] */}
            <div><b>This is valid!</b></div> // sera traduit 

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

            <InvalidTranslation /> // ne sera pas traduit
        </Tx>
    );
}
```

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

***

## Remarques

* Le composant `<Tx>` est conçu pour traduire le contenu de votre application en runtime.
* Utilisez le composant `<Tx>` pour traduire du texte brut ou des structures JSX, y compris les variables et les pluriels.

## Prochaines étapes

* Pour les traductions au build, consultez le composant [`<T>`](/docs/next/api/components/t).
* Pour des fonctionnalités plus avancées, consultez la [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).