Contenu dynamique
Comment traduire du contenu à l’exécution à l’aide des API de traduction côté serveur
La traduction de contenu dynamique gère le texte indisponible au moment du build — contenu généré par les utilisateurs, réponses d’API ou enregistrements de base de données. Utilisez <Tx> pour le contenu JSX et tx pour les chaînes simples, tous deux exécutés côté serveur uniquement pour des raisons de sécurité.
À utiliser avec parcimonie : La traduction dynamique consomme le quota d’API et ajoute de la latence. Préférez les composants <T> avec des composants de variables autant que possible.
Quand utiliser la traduction dynamique
La traduction dynamique concerne le contenu qui ne peut vraiment pas être connu au moment de la compilation :
Cas d’usage appropriés
- Contenu généré par les utilisateurs : messages de chat, avis, publications sur les réseaux sociaux
- Réponses d’API externes : données tierces, flux RSS, services externes
- Enregistrements de base de données : contenu CMS dynamique, profils utilisateur provenant d’API
- Données en temps réel : notifications en direct, messages d’état
À éviter dans ces cas
- Noms d’utilisateur, numéros de compte → Utilisez
<Var> - Messages conditionnels → Utilisez des composants de branchement
- Validation de formulaire → Utilisez la traduction de chaînes
- Configuration statique → Utilisez des chaînes partagées
Guide de démarrage rapide
Contenu JSX avec <Tx>
import { Tx } from 'gt-next';
async function UserPost({ postContent }) {
return (
<article>
<Tx>{postContent}</Tx>
</article>
);
}Chaînes simples avec tx
import { tx } from 'gt-next/server';
async function NotificationBanner({ message }) {
const translatedMessage = await tx(message);
return (
<div className="banner">
{translatedMessage}
</div>
);
}Uniquement côté serveur
<Tx> et tx sont uniquement exécutés côté serveur pour des raisons de sécurité :
// ✅ Composant serveur
async function ServerComponent() {
const translated = await tx(dynamicContent);
return <div>{translated}</div>;
}
// ❌ Composant client - ne fonctionnera pas
'use client';
function ClientComponent() {
const translated = await tx(dynamicContent); // Erreur !
return <div>{translated}</div>;
}Exemples
Contenu généré par les utilisateurs
import { Tx } from 'gt-next';
async function ChatMessage({ message }) {
return (
<div className="chat-message">
<div className="author">{message.author}</div>
<Tx>{message.content}</Tx>
</div>
);
}Données d’API externes
import { tx } from 'gt-next/server';
async function NewsArticle({ article }) {
const translatedTitle = await tx(article.title);
return (
<article>
<h1>{translatedTitle}</h1>
<p>{article.publishedAt}</p>
</article>
);
}Contenu mixte
import { T, Tx, Var } from 'gt-next';
async function ProductReview({ review }) {
return (
<div>
{/* Contenu statique avec variables */}
<T>
<p><Var>{review.author}</Var> a attribué <Var>{review.rating}</Var> étoiles à ce produit</p>
</T>
{/* Contenu utilisateur dynamique */}
<Tx>{review.content}</Tx>
</div>
);
}Problèmes fréquents
Évitez les abus
N’utilisez pas la traduction dynamique pour du contenu qui peut recourir à des composants standard :
// ❌ Inutile
const content = `Bonjour, ${userName} !`;
return <Tx>{content}</Tx>;
// ✅ Utilisez plutôt les composants de variables
return (
<T>
<p>Bonjour, <Var>{userName}</Var> !</p>
</T>
);Impact sur le quota d’API
La traduction dynamique consomme le quota d’API à chaque requête. Utilisez la mise en cache et gérez les erreurs dans les applications en production.
Prochaines étapes
- Guide de traduction locale - Gérer les traductions sans appels d’API
- Guide du middleware - Détection de la langue et routage
- Référence de l’API :
Que pensez-vous de ce guide ?