# gt-next: General Translation Next.js SDK: Le composant T
URL: https://generaltranslation.com/fr/docs/next/guides/t.mdx
---
title: Le composant T
description: Comment internationaliser des composants JSX avec le composant T
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez plutôt le modèle dans content/docs-templates/. */}

Le [composant `<T>`](/docs/next/api/components/t) est l’outil principal pour internationaliser le contenu JSX de votre application Next.js. Il encapsule vos éléments JSX et les traduit automatiquement en fonction du paramètre régional de l’utilisateur.

<Callout>
  **Conseil :** Avec l’[injection automatique de JSX](/docs/cli/features/auto-jsx-injection) activée, le compilateur peut automatiquement encapsuler votre JSX dans des composants de traduction au build.
  Dans la plupart des cas, vous n’aurez peut-être pas besoin d’ajouter `<T>` manuellement. L’utilisation manuelle de `<T>` reste utile lorsque vous avez besoin d’un contrôle plus fin, par exemple pour définir un `id` ou un `context` spécifique.
</Callout>

## Démarrage rapide

Transformez n’importe quel contenu JSX statique en l’entourant de [`<T>`](/docs/next/api/components/t) :

```jsx
import { T } from 'gt-next';

// Avant
function Greeting() {
  return <p>Hello, world!</p>;
}

// Après
function Greeting() {
  return <T><p>Hello, world!</p></T>;
}
```

Pour le contenu dynamique au sein de [`<T>`](/docs/next/api/components/t), utilisez les [composants variables](/docs/next/guides/variables) et les [composants de branchement](/docs/next/guides/branches).


## Utilisation de base

Le [composant `<T>`](/docs/next/api/components/t) accepte tout contenu JSX comme enfant :

```jsx
// Texte simple
<T>Welcome to our app</T>

// Éléments HTML
<T><h1>Page Title</h1></T>

// JSX imbriqué complexe
<T>
  <div className="alert">
    <span>Important:</span> Please read carefully.
  </div>
</T>
```


## Options de configuration

### Ajouter du contexte

Fournissez un contexte de traduction pour les termes ambigus :

```jsx
<T context="notification popup, not bread">
  Click the toast to dismiss
</T>
```


## Quand utiliser T

Utilisez [`<T>`](/docs/next/api/components/t) **uniquement pour du contenu statique** :

```jsx
// ✅ Le contenu statique fonctionne
<T>
  <button>Click here</button>
  <h1>Welcome to our site</h1>
</T>

// ❌ Le contenu dynamique ne fonctionne pas
<T>
  <p>Hello {username}</p>
  <p>Today is {new Date()}</p>
</T>

// ✅ Utilisez des composants variables pour le contenu dynamique
<T>
  <p>Hello <Var>{username}</Var></p>
</T>
```

<Callout>
  Les composants variables et de branchement sont conçus pour être utilisés dans [`<T>`](/docs/next/api/components/t) avec du contenu dynamique.
  Consultez les guides [Composants variables](/docs/next/guides/variables) et [Composants de branchement](/docs/next/guides/branches) pour en savoir plus.
</Callout>


## Exemples

### Éléments simples

```jsx
// Texte simple
<T>Hello, world!</T>

// Bouton avec texte
<T><Button>Submit Form</Button></T>

// Titre avec mise en forme
<T><h1 className="text-2xl font-bold">Welcome</h1></T>
```


### Composants complexes

```jsx
// Menu de navigation
<T>
  <nav className="navbar">
    <a href="/about">About Us</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Message d'alerte
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Your session expires in 5 minutes</span>
  </div>
</T>
```


### Avec des variables

Vous pouvez utiliser des composants variables pour appliquer un formatage localisé.

```jsx
// Combinaison de texte statique et de valeurs dynamiques
<T>
  <p>Welcome back, <Var>{user.name}</Var>!</p>
  <p>You have <Num>{user.friends.length}</Num> friends online</p>
  <p>Your birthday is <DateTime>{user.birthday}</DateTime></p>
  <p>Your balance is <Currency>{user.balance}</Currency></p>
</T>
```

<Callout>
  Pour en savoir plus sur le [`composant <Var>`](/docs/next/api/components/var), consultez le [guide des composants variables](/docs/next/guides/variables).
</Callout>


## Configuration de production

### Processus de build

Intégrez la traduction à votre pipeline de build :

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Comportement en développement et en production

* **Développement** : Avec une clé API de développement, les traductions se font à la demande au moment du rendu des composants. Vous verrez les traductions en temps réel pendant le développement.
* **Production** : Toutes les traductions sont précompilées lors de l’étape de build et seront visibles une fois votre application en ligne.

Définissez votre clé API de développement dans votre environnement pour activer la traduction en temps réel pendant le développement. Vous pouvez en créer une dans le tableau de bord, sous [Clés API](https://dash.generaltranslation.com/en-US/project/api-keys).

### Considérations relatives à la confidentialité

Le contenu des composants [`<T>`](/docs/next/api/components/t) est envoyé à l’API GT pour être traduit. Pour les données sensibles, utilisez les [Composants variables](/docs/next/guides/variables) afin de conserver les informations privées en local :

```jsx
// Sécurisé - les données sensibles restent en local
<T>
  Welcome back, <Var>{username}</Var>
</T>
```


## Que mettre dans un seul `<T>`

Regroupez **des blocs de contenu cohérents** — du contenu qu’un traducteur lirait et traduirait naturellement comme un tout.

```jsx
// ✅ Bien — le contenu associé est regroupé pour donner aux traducteurs le contexte complet
<T>
  <h1>Welcome to Our Platform</h1>
  <p>Get started in minutes with our simple setup process.</p>
</T>

// ✅ Bien — chaque carte est une unité indépendante
{features.map((feature) => (
  <T key={feature.id}>
    <h3><Var>{feature.title}</Var></h3>
    <p><Var>{feature.description}</Var></p>
  </T>
))}

// ❌ Trop fragmenté — découpe la traduction et perd le contexte
<T><h1>Welcome to Our Platform</h1></T>
<T><p>Get started in minutes with our simple setup process.</p></T>

// ❌ Trop large — envelopper toute la page complique la maintenance
<T>
  {/* ...des centaines de lignes de JSX... */}
</T>
```

**Règle générale :** si le texte est lié visuellement ou sémantiquement, regroupez-le dans un seul `<T>`. Ne le scindez que si le contenu est réellement indépendant (par exemple, un en-tête ou un pied de page).

Regrouper davantage de contenu dans un seul `<T>` donne plus de contexte aux traducteurs, ce qui produit des traductions plus naturelles — certaines langues restructurent les phrases ou ont besoin de faire référence au contenu voisin.


## Problèmes fréquents

### Limites des composants

[`<T>`](/docs/next/api/components/t) ne traduit que les enfants directs, pas le contenu à l’intérieur d’autres composants :

```jsx
// ❌ Incorrect - le contenu à l'intérieur des composants ne sera pas traduit
function MyComponent() {
  return <p>Ceci ne sera pas traduit</p>;
}

<T>
  <h1>Ceci sera traduit</h1>
  <MyComponent /> {/* Le contenu à l'intérieur ne sera pas traduit */}
</T>

// ✅ Correct - encapsulez chaque composant individuellement
function MyComponent() {
  return <T><p>Ceci sera traduit</p></T>;
}

<T><h1>Ceci sera traduit</h1></T>
<MyComponent />
```


### Composants T imbriqués

```jsx
// ❌ N'imbriquez pas les composants <T>
<T>
  <T>Hello world</T> {/* Ne faites pas ça */}
</T>
```


### Erreurs liées au contenu dynamique

La CLI signalera une erreur en cas de contenu dynamique dans [`<T>`](/docs/next/api/components/t). Encapsulez les valeurs dynamiques dans des composants variables :

```jsx
// ❌ Incorrect - le contenu dynamique provoque une erreur
<T><p>Hello {username}</p></T>

// ✅ Correct - utiliser des composants variables
<T><p>Hello <Var>{username}</Var></p></T>
```

<Callout>
  Consultez le [guide des composants variables](/docs/next/guides/variables) pour prendre en charge les valeurs dynamiques, et le [guide des composants de branchement](/docs/next/guides/branches) pour le contenu conditionnel.
</Callout>


## Étapes suivantes

<Callout>
  **Voyez-le en action :** Consultez l’[application d’exemple des bases du composant `<T>`](https://github.com/gt-examples/t-component-basics) pour une démonstration en conditions réelles — [aperçu en direct](https://t-component-basics.generaltranslation.dev).
</Callout>

* [Guide des composants variables](/docs/next/guides/variables) - Gérez le contenu dynamique dans les traductions JSX
* [Guide des composants de branchement](/docs/next/guides/branches) - Ajoutez une logique conditionnelle à vos traductions