Internationalisation

Les messages sont compilés, pas cherchés au runtime. messages/fr.json devient des fonctions typées à la compilation, donc une clé manquante est une erreur de compilation plutôt qu'un t("une.cle") affiché à un client.

{
  "heroTitle": "Lancez votre SaaS en quelques jours",
  "greeting": "Bon retour, {{name}}"
}

const t = useT();
t.heroTitle();
t.greeting({ name: user.firstName });

Piège numéro un : les doubles accolades#

Le format de message i18next interpole {{name}}. Un {name} à simple accolade compile sans aucun avertissement et livre le texte littéral {name} à votre client. C'est de loin l'erreur la plus courante de cette configuration, et aucune erreur ne l'attrape.

Piège numéro deux : les underscores dans les clés#

_ est le séparateur de contexte d'i18next. Une clé nommée meta_title compile comme une variante contextuelle d'un message nommé meta, et n'existe donc pas sous le nom meta_title. Utilisez le camelCase pour chaque clé : metaTitle.

Piège numéro trois : la langue dans un composant client#

La langue est un cookie, et seul le serveur peut le lire pendant le rendu. Un composant client qui résout lui-même sa langue rend une langue sur le serveur et possiblement une autre dans le navigateur, ce qui est une erreur d'hydratation.

Résolvez-la une fois à la racine et faites-la descendre :

// src/app/layout.tsx, un composant serveur
const locale = await currentLocale();
return <LocaleProvider locale={locale}>{children}</LocaleProvider>;

Ajouter une langue#

Le fichier settings.json doit porter à la fois les clés v1 (sourceLanguageTag, languageTags) et les clés v2 (baseLocale, locales). L'éditeur sur fink.inlang.com lit la v1 ; le compilateur lit la v2. Retirez l'un des deux jeux et l'un des deux cesse de fonctionner.

Traduire une chaîne dynamique#

Ne construisez pas une clé de message par concaténation. Le compilateur ne voit pas t[`status_${row.status}`] et n'inclura pas ces messages dans la sortie. Énumérez-les :

const STATUS = {
  pending: () => t.statusPending(),
  active: () => t.statusActive(),
} as const;

C'est verbeux, et cela signifie qu'ajouter un statut vous oblige à écrire son libellé, ce qui est exactement la bonne dose de friction.