BlogTableau de bord

Chaînes

Comment internationaliser des chaînes de texte simples avec useGT et getGT

La traduction de chaînes donne un accès direct aux traductions de texte sans JSX, idéal pour les attributs, les propriétés d’objet et les valeurs de texte simples. Utilisez useGT dans les composants synchrones et getGT dans les composants asynchrones.

Utilisation synchrone et asynchrone

  • Composants synchrones : hook useGT pour les composants React
  • Composants asynchrones : fonction asynchrone getGT pour les composants asynchrones

Prise en main rapide

Composants synchrones

import { useGT } from 'gt-next';

function MyComponent() {
  const t = useGT();
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      title={t('Champ pour l'adresse e-mail')}
    />
  );
}

Composants asynchrones

import { getGT } from 'gt-next/server';

async function MyServerComponent() {
  const t = await getGT();
  return (
    <input 
      placeholder={t('Saisissez votre e-mail')}
      title={t('Champ pour l'adresse e-mail')}
    />
  );
}

Quand utiliser la traduction de chaînes

La traduction de chaînes est idéale lorsque vous avez besoin de texte brut plutôt que de JSX :

Attributs HTML

const t = useGT();

<input 
  placeholder={t('Rechercher des produits...')}
  aria-label={t('Champ de recherche de produits')}
  title={t('Saisissez du texte pour rechercher dans notre catalogue')}
/>

Propriétés de l’objet

const t = useGT();

const user = {
  name: 'John',
  role: 'admin',
  bio: t('Développeur logiciel expérimenté avec 5 ans d'expérience avec React'),
  status: t('Actuellement disponible pour de nouveaux projets')
};

Configuration et constantes

const t = useGT();

const navigationItems = [
  { label: t('Accueil'), href: '/' },
  { label: t('Produits'), href: '/products' },
  { label: t('Contact'), href: '/contact' }
];

Quand utiliser <T> à la place

Utilisez le composant <T> pour le contenu JSX :

// ✅ Utilisez <T> pour le contenu JSX
<T><p>Bienvenue dans <strong>notre boutique</strong> !</p></T>

// ✅ Utilisez la traduction de chaînes pour le texte brut
<input placeholder={t('Rechercher des produits')} />

Utilisation des variables

Variables de base

Remplacez les espaces réservés par des valeurs dynamiques :

const t = useGT();
const itemCount = 5;

// Chaîne avec paramètre substituable
const message = t('Vous avez {count} articles dans votre panier', { count: itemCount });
// Résultat : « Vous avez 5 articles dans votre panier »

Variables multiples

const t = useGT();
const order = { id: 'ORD-123', total: 99.99, date: '2024-01-15' };

const confirmation = t(
  'Commande {orderId} d'un montant de {total} $ passée le {date}',
  { 
    orderId: order.id, 
    total: order.total, 
    date: order.date 
  }
);

Format de message ICU

Pour un formatage avancé, utilisez la syntaxe ICU :

const t = useGT();
translate('Il y a {count, plural, =0 {aucun article} =1 {un article} other {{count} articles}} dans le panier', { count: 10 });

Pour en savoir plus sur le format de message ICU, consultez la documentation d’Unicode.

Exemples

Champs de formulaire

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('Entrez votre adresse e-mail')}
        aria-label={t('Champ de saisie pour l\'e-mail')}
      />
      <textarea 
        placeholder={t('Parlez-nous de votre projet...')}
        aria-label={t('Description du projet')}
      />
      <button type="submit">
        {t('Envoyer le message')}
      </button>
    </form>
  );
}
import { useGT } from 'gt-next';

function Navigation() {
  const t = useGT();
  
  const menuItems = [
    { label: t('Accueil'), href: '/', icon: 'home' },
    { label: t('À propos'), href: '/about', icon: 'info' },
    { label: t('Services'), href: '/services', icon: 'briefcase' },
    { label: t('Contact'), href: '/contact', icon: 'mail' }
  ];

  return (
    <nav>
      {menuItems.map((item) => (
        <a key={item.href} href={item.href} title={item.label}>
          <Icon name={item.icon} />
          {item.label}
        </a>
      ))}
    </nav>
  );
}

Fabrique de contenu dynamique

// utils/productData.js
export function getProductMessages(t) {
  return {
    categories: [
      { id: 'electronics', name: t('Électronique') },
      { id: 'clothing', name: t('Vêtements') },
      { id: 'books', name: t('Livres') }
    ],
    statusMessages: {
      available: t('En stock et prêt à être expédié'),
      backordered: t('Actuellement en rupture de stock - expédition sous 2 à 3 semaines'),  
      discontinued: t('Cet article n'est plus disponible'),
    },
    errors: {
      notFound: t('Produit introuvable'),
      outOfStock: t('Désolé, cet article est actuellement en rupture de stock')
    }
  };
}

// components/ProductCard.jsx
import { useGT } from 'gt-next';
import { getProductMessages } from '../utils/productData';

function ProductCard({ product }) {
  const t = useGT();
  const messages = getProductMessages(t);
  
  return (
    <div>
      <h3>{product.name}</h3>
      <p>{messages.statusMessages[product.status]}</p>
      <span>{messages.categories.find(c => c.id === product.categoryId)?.name}</span>
    </div>
  );
}

Composant serveur avec métadonnées

import { getGT } from 'gt-next/server';

export async function generateMetadata({ params }) {
  const t = await getGT();
  
  return {
    title: t('Catalogue de produits - Trouvez ce qu'il vous faut'),
    description: t('Parcourez notre vaste collection de produits de qualité'),
    openGraph: {
      title: t('Découvrez nos produits'),
      description: t('Découvrez des offres exceptionnelles sur nos meilleurs produits')
    }
  };
}

export default async function ProductPage() {
  const t = await getGT();
  
  return (
    <div>
      <h1>{t('Produits phares')}</h1>
      <p>{t('Découvrez nos nouveautés et nos articles les plus populaires')}</p>
    </div>
  );
}

Problèmes fréquents

Contenu dynamique à l’exécution

Les chaînes doivent être connues au moment de la compilation – vous ne pouvez pas traduire de contenu dynamique :

// ❌ Le contenu dynamique ne fonctionnera pas
function MyComponent() {
  const [userMessage, setUserMessage] = useState('');
  const t = useGT();
  
  return <p>{t(userMessage)}</p>; // Cela échouera
}

// ✅ Utilisez des chaînes prédéfinies
function MyComponent() {
  const [messageType, setMessageType] = useState('welcome');
  const t = useGT();
  
  const messages = {
    welcome: t('Bienvenue dans notre application !'),
    goodbye: t('Merci de votre visite !')
  };
  
  return <p>{messages[messageType]}</p>;
}

Infractions aux règles des hooks

Respectez les règles des hooks React lors de l’utilisation de useGT :

// ❌ N'appelez pas les hooks de manière conditionnelle
function MyComponent({ showMessage }) {
  if (showMessage) {
    const t = useGT(); // Violation de la règle des hooks
    return <p>{t('Hello!')}</p>;
  }
  return null;
}

// ✅ Appelez toujours les hooks au niveau racine
function MyComponent({ showMessage }) {
  const t = useGT();
  
  if (showMessage) {
    return <p>{t('Hello!')}</p>;
  }
  return null;
}

Synchrones et asynchrones : ne pas confondre

Utilisez la fonction appropriée pour votre type de composant :

// ❌ Incorrect : useGT dans un composant asynchrone
export default async function AsyncComponent() {
  const t = useGT(); // Ceci ne fonctionnera pas
  return <p>{t('Hello')}</p>;
}

// ✅ Correct : getGT() dans un composant asynchrone  
export default async function AsyncComponent() {
  const t = await getGT();
  return <p>{t('Hello')}</p>;
}

// ✅ Correct : useGT() dans un composant synchrone
export default function SyncComponent() {
  const t = useGT();
  return <p>{t('Hello')}</p>;
}

Pour du contenu réellement dynamique nécessitant une traduction au moment de l’exécution, consultez le Guide du contenu dynamique.

Prochaines étapes

Comment trouvez-vous ce guide ?

Composants à embranchements

Utiliser des composants à embranchements pour du contenu conditionnel dans les traductions

Chaînes partagées

Comment internationaliser des chaînes utilisées dans plusieurs composants et files

Sur cette page

Utilisation synchrone et asynchrone
Prise en main rapide
Composants synchrones
Composants asynchrones
Quand utiliser la traduction de chaînes
Attributs HTML
Propriétés de l’objet
Configuration et constantes
Quand utiliser <T> à la place
Utilisation des variables
Variables de base
Variables multiples
Format de message ICU
Exemples
Champs de formulaire
Menu de navigation
Fabrique de contenu dynamique
Composant serveur avec métadonnées
Problèmes fréquents
Contenu dynamique à l’exécution
Infractions aux règles des hooks
Synchrones et asynchrones : ne pas confondre
Prochaines étapes