Le composant <T>
Comment internationaliser des composants JSX à l'aide du composant <T>
Le composant <T> est l’outil principal pour internationaliser le contenu JSX dans votre application Next.js. Il enveloppe vos éléments JSX et les traduit automatiquement en fonction de la locale de l’utilisateur.
Démarrage rapide
Transformez n’importe quel contenu JSX statique en l’entourant de <T> :
import { T } from 'gt-next';
// Avant
function Greeting() {
return <p>Bonjour, le monde !</p>;
}
// Après
function Greeting() {
return <T><p>Bonjour, le monde !</p></T>;
}Pour le contenu dynamique dans <T>, utilisez les Variable Components et les Branching Components.
Utilisation de base
Le composant <T> accepte tout contenu JSX via la prop 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éfinition des IDs de traduction
Utilisez des IDs explicites pour garantir la cohérence des traductions :
<T id="welcome-message">
Bon retour, 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>Nous sommes le {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> avec du contenu dynamique. Pour en savoir plus, consultez les guides Variable Components et Branching Components.
Exemples
Éléments simples
// Basic text
<T>Bonjour le monde !</T>
// Button with text
<T><Button>Envoyer le formulaire</Button></T>
// Heading with styling
<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 expire dans 5 minutes</span>
</div>
</T>Avec des 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, consultez le [composant <Var>] et le guide des composants Variable.
Configuration pour la production
Processus de build
Ajoutez la traduction à votre pipeline de build :
{
"scripts": {
"build": "npx gtx-cli translate && <...VOTRE_COMMANDE_DE_BUILD...>"
}
}Comportement en développement vs en production
- Développement: Avec une clé d’API de développement, les traductions sont effectuées à la demande au rendu des composants. Vous verrez les traductions en temps réel pendant que vous développez.
- Production: Toutes les traductions sont pré‑générées lors de l’étape de build et seront visibles une fois votre application en ligne.
Définissez votre clé d’API de développement dans vos variables d’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 en matière de confidentialité
Le contenu des composants <T> est envoyé à l’API GT pour traduction. Pour les données sensibles, utilisez les composants Variable afin de conserver les informations privées en local :
// Sécurisé - les données sensibles restent locales
<T>
Bon retour, <Var>{username}</Var>
</T>Problèmes fréquents
Délimitation des composants
<T> ne traduit que ses enfants directs, pas 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 à l'intérieur ne sera pas traduit */}
</T>
// ✅ Correct - envelopper 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 générera une erreur pour tout contenu dynamique dans <T>. Encapsulez les valeurs dynamiques avec des composants Variable :
// ❌ Incorrect - le contenu dynamique casse
<T><p>Bonjour {username}</p></T>
// ✅ Correct - utilisez les composants Variable
<T><p>Bonjour <Var>{username}</Var></p></T>Consultez le guide des composants Variable pour gérer les valeurs dynamiques et le guide des composants Branching pour le contenu conditionnel.
Prochaines étapes
- Guide des composants Var - Gérer du contenu dynamique dans des traductions JSX
- Guide des composants de branchement - Ajouter une logique conditionnelle à vos traductions
Que pensez-vous de ce guide ?