Le composant <T>

Le composant <T> est l’outil principal pour internationaliser le contenu JSX dans votre application Next.js. Il englobe vos éléments JSX et les traduit automatiquement en fonction du locale de l’utilisateur.

Démarrage rapide

Transformez n’importe quel contenu JSX statique en l’enveloppant avec <T> :

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>, utilisez les composants Variable et les composants Branching.

Utilisation de base

Le composant <T> accepte n’importe quel contenu JSX comme children :

// Texte simple
<T>Bienvenue dans notre application</T>

// Éléments HTML
<T><h1>Titre de la page</h1></T>

// JSX imbriqué complexe
<T>
  <div className="alert">
    <span>Important :</span> Veuillez lire attentivement.
  </div>
</T>

Options de configuration

Ajout de contexte

Fournissez du contexte de traduction pour les termes ambigus :

<T context="notification popup, not bread">
  Cliquez sur la notification pour la fermer
</T>

Définir les identifiants de traduction

Utilisez des identifiants explicites pour garantir des traductions cohérentes :

<T id="welcome-message">
  Bienvenue, utilisateur !
</T>

Quand utiliser `<T>`

Utilisez <T> uniquement pour le contenu statique :

// ✅ Le contenu statique fonctionne
<T><button>Cliquez ici</button></T>
<T><h1>Bienvenue sur notre site</h1></T>

// ❌ Le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>
<T><p>Aujourd'hui c'est {new Date()}</p></T>

// ✅ Utilisez les composants Variable pour le contenu dynamique
<T>
  <p>Bonjour <Var>{username}</Var></p>
</T>

Les composants Variable et Branching sont conçus pour être utilisés à l’intérieur de <T> afin de gérer du contenu dynamique. Pour en savoir plus, consultez les guides Variable Components et Branching Components.

Exemples

Éléments simples

// Texte de base
<T>Bonjour, monde !</T>

// Bouton avec texte
<T><Button>Envoyer le formulaire</Button></T>

// Titre avec style
<T><h1 className="text-2xl font-bold">Bienvenue</h1></T>

Composants complexes

// Menu de navigation
<T>
  <nav className="navbar">
    <a href="/about">À propos de nous</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Message d'alerte
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Votre session expirera dans 5 minutes</span>
  </div>
</T>

Avec variables

// Combinaison de texte statique avec des valeurs dynamiques
<T>
  <p>Bon retour, <Var>{user.name}</Var> !</p>
</T>

// Formulaire avec contenu mixte
<T>
  <label>
    E-mail : <input type="email" placeholder="Saisissez votre e-mail" />
  </label>
</T>

Pour en savoir plus sur le composant <Var>, consultez le Guide des composants Variables.

Configuration pour la production

Processus de build

Ajoutez la traduction à votre pipeline de build :

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Comportement en développement vs production

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

Définissez votre clé d’API de développement dans votre environnement pour activer la traduction en direct pendant le développement. Vous pouvez en créer une dans le tableau de bord, sous API Keys.

Considérations relatives à la confidentialité

Le contenu des composants <T> est envoyé à l’API GT pour traduction. Pour les données sensibles, utilisez les Variable Components afin de conserver les informations privées en local :

// Sécurisé - les données sensibles restent en local
<T>
  Bon retour, <Var>{username}</Var>
</T>

Problèmes courants

Limites des composants

<T> ne traduit que ses enfants directs, et non le contenu à l’intérieur d’autres composants :

// ❌ 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 interne ne sera pas traduit */}
</T>

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

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

Imbrication des composants `<T>`

// ❌ N'imbriquez pas les composants <T>
<T>
  <T>Hello world</T> {/* Ne faites pas cela */}
</T>

Erreurs de contenu dynamique

La CLI renverra une Error pour le contenu dynamique dans <T>. Encapsulez les values dynamiques avec des composants Variable :

// ❌ Incorrect - le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>

// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>

Consultez le guide des composants Variables pour gérer les valeurs dynamiques et le guide des composants Branching pour le contenu conditionnel.

Prochaines étapes

Guide des composants variables - Gérer du contenu dynamique dans des traductions JSX
Guide des composants à embranchements - Ajouter une logique conditionnelle à vos traductions

Démarrage rapide

Transformez n’importe quel contenu JSX statique en l’enveloppant avec <T> :

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>, utilisez les composants Variable et les composants Branching.

Utilisation de base

Le composant <T> accepte n’importe quel contenu JSX comme children :

// Texte simple
<T>Bienvenue dans notre application</T>

// Éléments HTML
<T><h1>Titre de la page</h1></T>

// JSX imbriqué complexe
<T>
  <div className="alert">
    <span>Important :</span> Veuillez lire attentivement.
  </div>
</T>

Options de configuration

Ajout de contexte

Fournissez du contexte de traduction pour les termes ambigus :

<T context="notification popup, not bread">
  Cliquez sur la notification pour la fermer
</T>

Définir les identifiants de traduction

Utilisez des identifiants explicites pour garantir des traductions cohérentes :

<T id="welcome-message">
  Bienvenue, utilisateur !
</T>

Quand utiliser `<T>`

Utilisez <T> uniquement pour le contenu statique :

// ✅ Le contenu statique fonctionne
<T><button>Cliquez ici</button></T>
<T><h1>Bienvenue sur notre site</h1></T>

// ❌ Le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>
<T><p>Aujourd'hui c'est {new Date()}</p></T>

// ✅ Utilisez les composants Variable pour le contenu dynamique
<T>
  <p>Bonjour <Var>{username}</Var></p>
</T>

Exemples

Éléments simples

// Texte de base
<T>Bonjour, monde !</T>

// Bouton avec texte
<T><Button>Envoyer le formulaire</Button></T>

// Titre avec style
<T><h1 className="text-2xl font-bold">Bienvenue</h1></T>

Composants complexes

// Menu de navigation
<T>
  <nav className="navbar">
    <a href="/about">À propos de nous</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Message d'alerte
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Votre session expirera dans 5 minutes</span>
  </div>
</T>

Avec variables

// Combinaison de texte statique avec des valeurs dynamiques
<T>
  <p>Bon retour, <Var>{user.name}</Var> !</p>
</T>

// Formulaire avec contenu mixte
<T>
  <label>
    E-mail : <input type="email" placeholder="Saisissez votre e-mail" />
  </label>
</T>

Pour en savoir plus sur le composant <Var>, consultez le Guide des composants Variables.

Configuration pour la production

Processus de build

Ajoutez la traduction à votre pipeline de build :

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Comportement en développement vs production

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

Considérations relatives à la confidentialité

Le contenu des composants <T> est envoyé à l’API GT pour traduction. Pour les données sensibles, utilisez les Variable Components afin de conserver les informations privées en local :

// Sécurisé - les données sensibles restent en local
<T>
  Bon retour, <Var>{username}</Var>
</T>

Problèmes courants

Limites des composants

<T> ne traduit que ses enfants directs, et non le contenu à l’intérieur d’autres composants :

// ❌ 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 interne ne sera pas traduit */}
</T>

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

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

Imbrication des composants `<T>`

// ❌ N'imbriquez pas les composants <T>
<T>
  <T>Hello world</T> {/* Ne faites pas cela */}
</T>

Erreurs de contenu dynamique

La CLI renverra une Error pour le contenu dynamique dans <T>. Encapsulez les values dynamiques avec des composants Variable :

// ❌ Incorrect - le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>

// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>

Consultez le guide des composants Variables pour gérer les valeurs dynamiques et le guide des composants Branching pour le contenu conditionnel.

Prochaines étapes

Guide des composants variables - Gérer du contenu dynamique dans des traductions JSX
Guide des composants à embranchements - Ajouter une logique conditionnelle à vos traductions

Démarrage rapide

Transformez n’importe quel contenu JSX statique en l’enveloppant avec <T> :

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>, utilisez les composants Variable et les composants Branching.

Utilisation de base

Le composant <T> accepte n’importe quel contenu JSX comme children :

// Texte simple
<T>Bienvenue dans notre application</T>

// Éléments HTML
<T><h1>Titre de la page</h1></T>

// JSX imbriqué complexe
<T>
  <div className="alert">
    <span>Important :</span> Veuillez lire attentivement.
  </div>
</T>

Options de configuration

Ajout de contexte

Fournissez du contexte de traduction pour les termes ambigus :

<T context="notification popup, not bread">
  Cliquez sur la notification pour la fermer
</T>

Définir les identifiants de traduction

Utilisez des identifiants explicites pour garantir des traductions cohérentes :

<T id="welcome-message">
  Bienvenue, utilisateur !
</T>

Quand utiliser `<T>`

Utilisez <T> uniquement pour le contenu statique :

// ✅ Le contenu statique fonctionne
<T><button>Cliquez ici</button></T>
<T><h1>Bienvenue sur notre site</h1></T>

// ❌ Le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>
<T><p>Aujourd'hui c'est {new Date()}</p></T>

// ✅ Utilisez les composants Variable pour le contenu dynamique
<T>
  <p>Bonjour <Var>{username}</Var></p>
</T>

Exemples

Éléments simples

// Texte de base
<T>Bonjour, monde !</T>

// Bouton avec texte
<T><Button>Envoyer le formulaire</Button></T>

// Titre avec style
<T><h1 className="text-2xl font-bold">Bienvenue</h1></T>

Composants complexes

// Menu de navigation
<T>
  <nav className="navbar">
    <a href="/about">À propos de nous</a>
    <a href="/contact">Contact</a>
  </nav>
</T>

// Message d'alerte
<T>
  <div className="alert alert-warning">
    <AlertIcon className="w-5 h-5" />
    <span>Votre session expirera dans 5 minutes</span>
  </div>
</T>

Avec variables

// Combinaison de texte statique avec des valeurs dynamiques
<T>
  <p>Bon retour, <Var>{user.name}</Var> !</p>
</T>

// Formulaire avec contenu mixte
<T>
  <label>
    E-mail : <input type="email" placeholder="Saisissez votre e-mail" />
  </label>
</T>

Pour en savoir plus sur le composant <Var>, consultez le Guide des composants Variables.

Configuration pour la production

Processus de build

Ajoutez la traduction à votre pipeline de build :

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

Comportement en développement vs production

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

Considérations relatives à la confidentialité

Le contenu des composants <T> est envoyé à l’API GT pour traduction. Pour les données sensibles, utilisez les Variable Components afin de conserver les informations privées en local :

// Sécurisé - les données sensibles restent en local
<T>
  Bon retour, <Var>{username}</Var>
</T>

Problèmes courants

Limites des composants

<T> ne traduit que ses enfants directs, et non le contenu à l’intérieur d’autres composants :

// ❌ 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 interne ne sera pas traduit */}
</T>

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

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

Imbrication des composants `<T>`

// ❌ N'imbriquez pas les composants <T>
<T>
  <T>Hello world</T> {/* Ne faites pas cela */}
</T>

Erreurs de contenu dynamique

La CLI renverra une Error pour le contenu dynamique dans <T>. Encapsulez les values dynamiques avec des composants Variable :

// ❌ Incorrect - le contenu dynamique ne fonctionne pas
<T><p>Bonjour {username}</p></T>

// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>

Consultez le guide des composants Variables pour gérer les valeurs dynamiques et le guide des composants Branching pour le contenu conditionnel.

Prochaines étapes

Guide des composants variables - Gérer du contenu dynamique dans des traductions JSX
Guide des composants à embranchements - Ajouter une logique conditionnelle à vos traductions

Le composant &lt;T&gt;

Sur cette page

Le composant &lt;T&gt;

Sur cette page

Le composant &lt;T&gt;

Sur cette page

GitHubMettre une étoile sur GitHub

GitHubMettre une étoile sur GitHub

Le composant <T>

Le composant <T>

Le composant <T>

Mettre une étoile sur GitHub

Mettre une étoile sur GitHub