Tableau de bord

Chaînes

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

La traduction de chaînes offre un accès direct aux traductions de texte sans JSX, idéale 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 composants React
  • Composants asynchrones : fonction getGT pour 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 d\'adresse e-mail')}
    />
  );
}

Composants asynchrones

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

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

Quand utiliser la traduction de chaînes

La traduction de chaînes est idéale lorsque vous avez besoin de texte simple 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('Tapez 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 en React'),
  status: t('Actuellement disponible pour des 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îne 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 espace réservé
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 des mises en forme avancées, 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 Unicode.

Exemples

Champs de formulaire

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <form>
      <input 
        type="email"
        placeholder={t('Saisissez votre adresse e-mail')}
        aria-label={t('Champ de saisie 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 de nous'), 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 à expédier'),
      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 des 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 haute qualité'),
    openGraph: {
      title: t('Découvrez nos produits'),
      description: t('Découvrez des offres exceptionnelles sur des articles très bien notés')
    }
  };
}

export default async function ProductPage() {
  const t = await getGT();
  
  return (
    <div>
      <h1>{t('Produits vedettes')}</h1>
      <p>{t('Découvrez nos articles les plus récents et 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>; // Ceci é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('Bonjour !')}</p>;
  }
  return null;
}

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

Synchrone vs asynchrone : attention à la confusion

Utilisez la fonction adaptée à 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('Bonjour')}</p>;
}

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

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

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

Prochaines étapes

Que pensez-vous de ce guide ?

Composants conditionnels

Utiliser des composants conditionnels pour du contenu soumis à des conditions dans les traductions

Chaînes partagées

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

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 des métadonnées
Problèmes fréquents
Contenu dynamique à l’exécution
Infractions aux règles des hooks
Synchrone vs asynchrone : attention à la confusion
Prochaines étapes
Chaînes