React + LinguiJS : Le guide complet d'internationalisation [2026]

Pourquoi choisir LinguiJS en 2026 ?

Alors que react-i18next et react-intl sont populaires, LinguiJS a gagné beaucoup de terrain grâce à son approche axée sur la performance et l'expérience développeur.

• Léger : Les messages sont compilés, ce qui réduit la taille du bundle.
• Macros : Syntaxe propre utilisant des macros JS (pas besoin d'IDs de clés manuels).
• Extraction : CLI puissant pour extraire les messages du code source.

Installation

TerminalCopy
npm install --save-dev @lingui/cli @lingui/macro
npm install @lingui/react

Configuration

Créez un fichier lingui.config.js à la racine :

JavaScriptCopy
1module.exports = {
2  locales: ["en", "fr", "es"],
3  sourceLocale: "en",
4  catalogs: [{
5    path: "src/locales/{locale}/messages",
6    include: ["src"]
7  }],
8  format: "po"
9}

Utilisation dans les composants

La "magic" de Lingui vient de ses macros. Vous écrivez le texte en anglais directement dans votre code.

JSXCopy
1import { Trans } from '@lingui/macro';
2
3export default function Welcome() {
4  return (
5    <h1>
6      <Trans>Welcome to my App!</Trans>
7    </h1>
8  );
9}

Pas besoin d'inventer des clés comme homepage.welcome_title. Le texte source est la clé (par défaut, ou haché selon la config).

Gestion des Pluriels

Lingui gère brillamment les pluriels complexes.

JSXCopy
1import { Plural } from '@lingui/macro';
2
3<p>
4  <Plural
5    value={count}
6    one="# message"
7    other="# messages"
8  />
9</p>

Flux de travail avec IntlPull

Lingui utilise souvent des fichiers .po (Portable Object), un format standard très puissant.

1. Extraction : npx lingui extract scanne votre code et met à jour les fichiers .po.
2. Traduction : Envoyez ces fichiers à IntlPull pour traduction IA ou humaine.
3. Compilation : npx lingui compile transforme les .po en fichiers JS optimisés pour la prod.

TerminalCopy
# Exemple d'automatisation
npm run extract
npx @intlpullhq/cli push src/locales/en/messages.po

Conclusion

Si vous cherchez une alternative moderne, typée et performante aux bibliothèques i18n classiques pour React, LinguiJS est un excellent choix en 2026. Sa syntaxe basée sur les macros rend le code plus lisible et maintenable.