# General Translation Knowledge Base: Quelle est la meilleure bibliothèque d’i18n pour une application React ? URL: https://generaltranslation.com/fr/kb/best-react-i18n-library.mdx Docs index: https://generaltranslation.com/llms.txt Description: Les quatre principales bibliothèques d’i18n pour React sont gt-react de General Translation, react-i18next, Lingui et React Intl. Toutes les quatre affichent et formatent les traductions, mais seule gt-react les génère aussi, à partir du texte intégré directement dans votre JSX. Choisissez react-i18next pour conserver vos catalogues et plugins i18next, Lingui pour l’extraction vers des catalogues compilés, et React Intl pour FormatJS et ICU MessageFormat. Category: Outils de workflow Last updated: 2026-10-16 Authors: Jackie Chen Published: 2026-10-16 Le choix de la meilleure bibliothèque d’i18n pour React dépend de l’endroit où vous voulez placer vos textes et de la personne qui produit les traductions. gt-react garde les textes intégrés au JSX et c’est la seule option présentée ici qui génère aussi les traductions. react-i18next, Lingui et React Intl affichent les traductions que vous fournissez dans des fichiers de catalogue, chacune avec sa propre façon de rédiger les messages et sa propre chaîne d’outils. Commencez par déterminer votre modèle de rendu. Une application React exécutée uniquement dans le navigateur, une application React avec rendu côté serveur et une application Next.js utilisant l’App Router n’ont pas les mêmes exigences de configuration initiale, et chaque bibliothèque les documente séparément. ## Comment se comparent les principales bibliothèques i18n pour React ? | Bibliothèque | Rédaction des textes | Traduit votre contenu ? | Formes plurielles | Rendu côté serveur | À choisir si | | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | gt-react (General Translation) | JSX intégré dans [``](/docs/react/reference/components/t), chaînes avec [`useGT`](/docs/react/reference/hooks/use-gt), encapsulation automatique facultative ou dictionnaires à clés | Oui, avec [`gt translate`](/docs/cli/reference/commands/translate) | Branches [``](/docs/react/reference/components/plural) | [Configuration initiale SSR](/docs/react/react-quickstart) ; [gt-next](/docs/react/nextjs-quickstart) pour l’App Router | Vous voulez des textes lisibles dans vos composants et des traductions générées à chaque compilation | | react-i18next | Clés dans des ressources JSON, avec `Trans` pour le texte enrichi | Non. Faites appel à votre équipe ou à un service comme Locize | Une clé par forme du pluriel | [Guide SSR](https://react.i18next.com/latest/ssr) | Vous utilisez déjà i18next ou avez besoin de ses plugins | | Lingui | Macros intégrées ou ID explicites, extraits dans des catalogues PO | Non. Les catalogues sont confiés à des traducteurs ou à un service | ICU MessageFormat | [Intégration RSC](https://lingui.dev/tutorials/react-rsc) | Vous voulez un workflow de catalogue fondé sur l’extraction et la compilation | | React Intl (FormatJS) | Descripteurs de messages avec ID et messages par défaut | Non. Vous fournissez vous-même les catalogues traduits | ICU MessageFormat | Consultez l’intégration propre à votre framework | Votre équipe travaille déjà avec FormatJS et ICU | ## À quoi ressemble le même bouton avec react-i18next et avec gt-react ? Avec react-i18next, le texte est stocké dans un fichier de ressources : ```json title="locales/en/translation.json" { "settings": { "save": "Save changes" } } ``` Le composant la récupère par sa clé : ```tsx import { useTranslation } from 'react-i18next'; export function SaveButton() { const { t } = useTranslation(); return ; } ``` Chaque langue supplémentaire nécessite son propre fichier de ressources, rédigé à la main ou confié à des traducteurs. Avec gt-react, le texte reste dans le composant : ```tsx import { T } from 'gt-react'; export function SaveButton() { return ( ); } ``` Lorsque vous exécutez [`gt translate`](/docs/cli/reference/commands/translate) avant votre compilation, chaque bloc [``](/docs/react/reference/components/t) est envoyé à General Translation avec sa structure d'éléments, et une traduction est générée pour chaque locale cible. Toute correction rédactionnelle apparaît dans le diff du composant, et l'exécution suivante la retraduit. ## 1. gt-react : le texte dans le JSX, des traductions générées gt-react conserve le texte source dans le composant. Encapsulez le JSX dans [``](/docs/react/reference/components/t), et utilisez [`useGT`](/docs/react/reference/hooks/use-gt) lorsqu'une API attend une chaîne de caractères, comme le `placeholder` d'un champ de saisie. Pour le texte enrichi, regroupez la phrase et ses éléments intégrés dans un seul bloc [``](/docs/react/reference/components/t) afin qu'ils soient traduits ensemble, et ajoutez une [prop `context`](/docs/react/reference/components/t#context) lorsque la formulation seule est ambiguë. Pour une application comportant beaucoup de JSX non balisé, l'[injection automatique de JSX](/docs/cli/guides/using-auto-jsx) ajoute les wrappers de traduction à votre place lors de la compilation. Définissez `enableAutoJsxInjection` dans `files.gt.parsingFlags` du fichier `gt.config.json` et ajoutez `@generaltranslation/compiler` à votre bundler. Cette fonctionnalité est compatible avec les SPA React, les applications React avec rendu côté serveur et les compilations webpack de Next.js, et ne touche pas aux blocs [``](/docs/react/reference/components/t) existants. Vérifiez le texte extrait, les valeurs dynamiques et le regroupement du texte enrichi sur quelques écrans avant de l'activer pour toute l'application. gt-react est [sous licence MIT](https://github.com/generaltranslation/gt) et repose sur les paquets ICU et de formatage développés par General Translation, et non sur une autre bibliothèque d’i18n. Il affiche les [traductions intégrées au bundle](/docs/react/guides/storing-translations) sans compte General Translation ni requêtes à l'exécution. Lorsque les traductions sont générées par General Translation, les relecteurs peuvent les corriger dans l'[Éditeur de Traduction](/docs/platform/dashboard/guides/reviewing-translations). La configuration initiale dépend du modèle de rendu : suivez le [Démarrage rapide pour une SPA React](/docs/react/react-spa-quickstart) pour les applications exécutées uniquement dans le navigateur, le [Démarrage rapide avec React](/docs/react/react-quickstart) pour les applications avec rendu côté serveur, et [gt-next](/docs/react/nextjs-quickstart) pour Next.js. **Choisissez gt-react** si vous souhaitez pouvoir relire le texte dans les diffs des composants, générer les traductions pendant la compilation, ou encapsuler automatiquement le contenu pour localiser rapidement une application existante. ## 2. react-i18next : l’écosystème i18next [react-i18next](https://react.i18next.com/) relie React à i18next, le framework d’i18n JavaScript le plus utilisé. Ses hooks affichent des messages à partir de ressources JSON, et son composant `Trans` gère les textes qui contiennent des éléments React. L’[écosystème de plugins i18next](https://www.i18next.com/overview/plugins-and-utils) comprend des backends de chargement des traductions, des détecteurs de langue et des outils d’extraction. La CLI officielle, quant à elle, prend en charge l’extraction, la synchronisation des paramètres régionaux et la génération de types TypeScript. i18next permet également d’[utiliser le texte source comme clés](https://www.i18next.com/principles/fallback), même si sa documentation prévient qu’il devient alors plus difficile de coordonner les modifications de contenu avec les traductions. react-i18next ne traduit pas vos ressources : les traductions sont fournies par votre équipe ou par un service. L’équipe i18next documente d’ailleurs un [workflow avec Locize](https://react.i18next.com/guides/multiple-translation-files). La CLI `gt` peut également [traduire les fichiers JSON de react-i18next](/docs/cli/guides/generating-translations) sans migration. **Choisissez react-i18next** si vous disposez déjà de ressources i18next ou si vous avez besoin de ses plugins de chargement et de détection de la langue. ## 3. Lingui : extraire et compiler les catalogues [Lingui](https://lingui.dev/introduction) vous permet d'écrire des messages intégrés au code à l'aide de macros, de les extraire dans des catalogues, de les traduire, puis de compiler le résultat pour l'application. Il prend en charge les identifiants de message générés comme explicites, et utilise PO comme format de catalogue par défaut. Son [tutoriel React](https://lingui.dev/tutorials/react) couvre l'ensemble du cycle, et les applications utilisant des Composants Serveur disposent d'une [intégration dédiée](https://lingui.dev/tutorials/react-rsc). Lingui garde les textes au plus près de l'IU, mais toutes les étapes qui suivent l'extraction reviennent à votre équipe : traduction, relecture, compilation et chargement. L'extraction repère les nouveaux messages, mais ne les traduit pas. **Choisissez Lingui** si vos traducteurs ou votre service de traduction travaillent avec des catalogues PO et que vous souhaitez tirer parti des outils d'extraction et du compilateur de Lingui. ## 4. React Intl : FormatJS et ICU MessageFormat [React Intl](https://formatjs.github.io/docs/react-intl/) est la bibliothèque React de FormatJS dédiée aux messages, aux formes plurielles, aux dates et aux nombres. Les [descripteurs de messages](https://formatjs.github.io/docs/react-intl/api/) identifient chaque message par un ID, accompagné d'un message par défaut facultatif et d'une description destinée aux traducteurs. L'[extraction FormatJS](https://formatjs.github.io/docs/getting-started/message-extraction/) les collecte et peut générer les ID. Les messages utilisent [ICU MessageFormat](https://formatjs.github.io/docs/core-concepts/icu-syntax/) : les relecteurs doivent donc maîtriser sa syntaxe d'espaces réservés et de pluriels, et c'est à votre pipeline de fournir les catalogues traduits. La gestion du rendu côté serveur et des frontières client varie selon le framework ; vérifiez donc l'intégration propre au vôtre avant d'adopter cette bibliothèque. **Choisissez React Intl** si votre équipe utilise déjà FormatJS ou souhaite adopter ICU MessageFormat dans l'ensemble du projet. ## Comment tester une bibliothèque d’i18n React avant de faire votre choix ? Choisissez une fonctionnalité comportant un titre, une variable nommée, un nombre soumis au pluriel, un libellé de champ accessible et un prix formaté. Localisez-la dans deux langues avec chaque bibliothèque candidate, puis modifiez une phrase source et ajoutez un nouveau message. Comparez ensuite : 1. **Rédaction :** un relecteur peut-il comprendre le texte et son contexte dans le diff ? 2. **Traduction :** comment le texte nouveau ou modifié parvient-il à la personne chargée de le traduire ? 3. **Vérification :** pouvez-vous détecter les messages manquants et les variables cassées avant la livraison ? 4. **Livraison :** quels fichiers ou services doivent être disponibles lorsque l’application de production effectue son rendu ? Si votre bibliothèque actuelle l’emporte, conservez-la. La CLI `gt` traduit aussi les catalogues react-i18next : la façon dont vous rédigez vos textes ne détermine donc pas la façon dont ils sont traduits. Avant la mise en production, parcourez la [checklist de lancement d’une application multilingue](/kb/multilingual-app-launch-checklist). General Translation est utilisé par les équipes de développement de Cursor, Ramp, Profound, Cognition, Sierra et ClickHouse. Pour l’essayer, commencez par le [Démarrage rapide avec React](/docs/react/react-quickstart). ## Questions fréquentes ### Quelle bibliothèque i18n React traduit automatiquement mon application ? gt-react. react-i18next, Lingui et React Intl se contentent d’afficher les traductions que vous leur fournissez. Avec gt-react, [`gt translate`](/docs/cli/reference/commands/translate) génère les traductions pour chaque locale cible en s’appuyant sur votre code comme contexte. ### react-i18next ou React Intl : lequel choisir ? Aucun n'est meilleur dans l'absolu. react-i18next convient aux équipes qui veulent des ressources JSON et les plugins d'i18next. React Intl convient aux équipes qui ont standardisé leur stack sur FormatJS et ICU MessageFormat. Dans les deux cas, la traduction reste à la charge de votre équipe ou d'un service tiers. ### Quelle bibliothèque d’i18n React prend en charge les Composants serveur ? Pour les applications Next.js basées sur l’App Router, utilisez [gt-next](/docs/react/nextjs-quickstart), qui prend en charge les Composants Serveur et Client. Lingui propose une [intégration RSC dédiée](https://lingui.dev/tutorials/react-rsc), et next-intl constitue une autre option pour l’App Router. ### Puis-je utiliser General Translation sans abandonner react-i18next ? Oui. Si votre `package.json` déclare directement `i18next`, la CLI `gt` le détecte et traduit vos ressources JSON react-i18next tout en conservant leur syntaxe. Consultez [Générer des traductions](/docs/cli/guides/generating-translations). ### Ai-je encore besoin de fichiers de traduction JSON avec gt-react ? Pas en tant que fichiers sources. Vous rédigez vos textes de manière intégrée, directement dans le code, et les traductions sont générées sous forme de fichiers lors de la compilation ou servies depuis le CDN de General Translation. Consultez [l'i18n sans fichiers de traduction](/kb/i18n-without-translation-files). ## Points clés * gt-react, react-i18next, Lingui et React Intl permettent tous d'afficher et de formater des traductions dans React. Seul gt-react sait également les générer. * gt-react conserve le texte intégré dans le JSX et peut encapsuler automatiquement le JSX existant lors du build. * react-i18next, Lingui et React Intl s'appuient sur des catalogues que votre équipe ou un service de traduction doit remplir. * Vous pouvez conserver react-i18next tout en utilisant General Translation pour traduire ses ressources. ## Related questions - [General Translation vs i18next, react-intl et next-intl : quelle bibliothèque d’i18n choisir ?](https://generaltranslation.com/fr/kb/general-translation-vs-i18n-libraries.mdx): Les bibliothèques open source comme i18next, react-intl et next-intl ne traduisent rien. Elles affichent les traductions que vous leur fournissez dans un fichier de catalogue par langue, rédigées par vous, vos traducteurs ou un service tiers. Les bibliothèques de General Translation sont elles aussi open source et remplissent le même rôle, mais General Translation se charge en plus de la traduction, en s’appuyant sur votre code comme contexte. - [Que faut-il vérifier avant de lancer une application multilingue ?](https://generaltranslation.com/fr/kb/multilingual-app-launch-checklist.mdx): Avant de lancer une application multilingue, testez neuf points dans chaque paramètre régional pris en charge : les parcours utilisateur complets, erreurs comprises, la détection de la langue et le changement de langue, les variables et les formes plurielles, la devise et les fuseaux horaires, l’expansion du texte, la mise en page right-to-left, l’accessibilité, la distribution des traductions en Production et des URL de langue explorables pour le SEO. Chaque vérification doit s’accompagner d’un critère de réussite explicite. - [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Avec gt-react ou gt-next, le contenu reste intégré dans vos composants, à l’intérieur d’un composant ``, et les traductions sont générées lors du build. Il n’y a donc ni clés ni fichiers JSON par paramètre régional à écrire et à garder synchronisés. - [Comment gérer les formes plurielles dans React ?](https://generaltranslation.com/fr/kb/how-to-handle-plurals-in-react.mdx): Ne codez pas en dur la logique de pluralisation avec des tests comme n === 1. Un petit utilitaire suffit pour une application uniquement en anglais, mais une application multilingue a besoin de règles de pluriel adaptées au paramètre régional, que prend en charge pour chaque langue un composant i18n tel que `` de gt-react ou gt-next. ## Previous and next questions - Previous question: [Que faut-il vérifier avant de lancer une application multilingue ?](https://generaltranslation.com/fr/kb/multilingual-app-launch-checklist.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.