React-Intl VS React-i18next VS Intlayer | Internationalisation (i18n) avec React

Voici une comparaison concise de trois bibliothèques i18n (internationalisation) populaires pour React : React-Intl, React-i18next et Intlayer. Chaque bibliothèque offre des fonctionnalités et des workflows uniques pour intégrer le support multilingue dans votre application React. Après avoir lu ceci, vous devriez être en mesure de décider quelle solution correspond le mieux à vos besoins.

1. Introduction

L'internationalisation (i18n) dans les applications React peut être réalisée de plusieurs manières. Les trois bibliothèques présentées ici ont différentes philosophies de conception, ensembles de fonctionnalités et support communautaire :

1. React-Intl
2. React-i18next
3. Intlayer

Vous trouverez ci-dessous un aperçu de chaque solution, suivi d'une comparaison des fonctionnalités, des avantages et inconvénients, et des cas d'utilisation exemplaires.

2. React-Intl

Vue d'ensemble

React-Intl fait partie de la suite FormatJS. Elle fournit un ensemble puissant d'APIs et de composants pour gérer le formatage des messages, la pluralisation, le formatage de la date/heure et des nombres. React-Intl est largement utilisé dans les applications d'entreprise, principalement parce qu'il fait partie d'un écosystème qui standardise la syntaxe des messages et leur formatage.

Fonctionnalités clés

• Syntaxe de message ICU : Offre une syntaxe complète pour l'interpolation des messages, la pluralisation, et plus encore.
• Formatage localisé : Utilitaires intégrés pour formater les dates, les heures, les nombres et les temps relatifs en fonction de la locale.
• Composants déclaratifs : Expose <FormattedMessage>, <FormattedNumber>, <FormattedDate>, etc., pour une utilisation transparente dans JSX.
• Écosystème riche : S'intègre bien avec les outils de FormatJS (par exemple, babel-plugin-react-intl) pour extraire, gérer et compiler les messages.

Flux de travail typique

1. Définir les catalogues de messages (généralement des fichiers JSON par locale).
2. Enveloppez votre application dans <IntlProvider locale="fr" messages={messages}>.
3. Utilisez <FormattedMessage id="myMessage" defaultMessage="Bonjour le monde" /> ou le hook useIntl() pour accéder aux chaînes de traduction.

Avantages

• Bien établi et utilisé dans de nombreux environnements de production.
• Formatage de message avancé, y compris la pluralisation, le genre, les fuseaux horaires, et plus encore.
• Support d'outils fort pour l'extraction et la compilation des messages.

Inconvénients

• Nécessite une familiarité avec le format de message ICU, qui peut être verbeux.
• Pas aussi simple de gérer des traductions dynamiques ou complexes qui vont au-delà des simples chaînes.

3. React-i18next

Vue d'ensemble

React-i18next est une extension de React de i18next, l'un des frameworks JavaScript i18n les plus populaires. Il offre des fonctionnalités étendues pour les traductions en temps réel, le chargement paresseux, et la détection de langue, ce qui le rend extrêmement flexible pour une grande variété de cas d'utilisation.

Fonctionnalités clés

• Structure de traduction flexible : Non lié à un format unique comme l'ICU. Vous pouvez stocker des traductions en JSON, utiliser l'interpolation, la pluralisation, etc.
• Changement de langue dynamique : Plugins de détection de langue intégrés et mises à jour en temps réel.
• Traductions imbriquées et structurées : Vous pouvez imbriquer facilement les traductions au sein du JSON.
• Écosystème de plugins étendu : Pour la détection (navigateur, chemin, sous-domaine, etc.), le chargement des ressources, la mise en cache, et plus encore.

Flux de travail typique

1. Installez i18next & react-i18next.
2. Configurez i18n pour charger les traductions (JSON) et mettre en place la détection de langue ou les fallback.
3. Enveloppez votre application dans I18nextProvider.
4. Utilisez le hook useTranslation() ou le composant <Trans> pour afficher les traductions.

Avantages

• Très flexible et riche en fonctionnalités.
• Communauté très active et grand écosystème de plugins.
• Facilité de chargement dynamique des traductions (par exemple, depuis un serveur, à la demande).

Inconvénients

• La configuration peut être verbeuse, surtout si vous avez des besoins plus avancés.
• Si vous préférez des traductions fortement typées, vous aurez peut-être besoin de configurations TypeScript supplémentaires.

4. Intlayer

Vue d'ensemble

Intlayer est une bibliothèque i18n open-source plus récente axée sur les déclarations de contenu au niveau des composants, la sécurité des types et le routage dynamique. Elle est conçue pour les workflows modernes de React, prenant en charge à la fois Create React App et les configurations Vite. Elle inclut également des fonctionnalités avancées telles que le routage basé sur la locale et des types TypeScript auto-générés pour les traductions.

Fonctionnalités clés

• Fichiers de contenu déclaratifs : Chaque composant ou module peut déclarer ses traductions dans des fichiers dédiés .content.tsx ou .content.json, gardant le contenu proche de son utilisation.
• Routage & middleware intégrés : Modules optionnels pour le routage localisé (par exemple, /fr/about, /en/about) et middleware serveur pour détecter la locale de l'utilisateur.
• Types TypeScript auto-générés : Assure la sécurité des types avec des fonctionnalités telles que l'autocomplétion et la détection d'erreurs à la compilation.
• Traductions dynamiques et riches : Peut inclure JSX/TSX dans les traductions pour des cas d'utilisation plus complexes (par exemple, liens, texte en gras, icônes dans les traductions).

Flux de travail typique

1. Installez intlayer et react-intlayer.
2. Créez intlayer.config.ts pour définir les locales disponibles et la locale par défaut.
3. Utilisez l'CLI Intlayer ou le plugin pour transpiler les déclarations de contenu.
4. Enveloppez votre application dans <IntlayerProvider> et récupérez le contenu avec useIntlayer("keyName").

Avantages

• Compatible TypeScript avec génération de types intégrée et vérification d'erreurs.
• Contenu riche possible (par exemple, passer des nœuds React comme traductions).
• Routage localisé prêt à l'emploi.
• Intégré aux outils de build populaires (CRA, Vite) pour une configuration facile.

Inconvénients

• Encore relativement nouveau par rapport à React-Intl ou React-i18next.
• Accent plus fort sur une approche de "déclaration de contenu au niveau des composants" - peut être un changement par rapport aux catalogues .json typiques.
• Écosystème et communauté plus petits par rapport aux bibliothèques plus établies.

5. Comparaison des fonctionnalités

6. Quand choisir chacun

1. React-Intl

   • Vous avez besoin de formatage puissant pour les dates/heures/nombres et d'une syntaxe de message ICU solide.
   • Vous préférez une approche plus basée sur les standards pour les traductions.
   • Vous n'avez pas besoin de routage localisé ou de clés de traduction fortement typées.

2. React-i18next

   • Vous avez besoin d'une solution flexible, établie avec un chargement de traduction dynamique et à la demande.
   • Vous souhaitez une détection de langage basée sur des plugins (par exemple, à partir de l'URL, des cookies, du stockage local) ou un cache avancé.
   • Vous avez besoin du plus grand écosystème, avec de nombreuses intégrations existantes pour divers frameworks (Next.js, React Native, etc.).

3. Intlayer

   • Vous souhaitez une forte intégration TypeScript avec des types auto-générés, garantissant que vous ne manquiez que rarement une clé de traduction.
   • Vous préférez un contenu déclaratif proche du composant, pouvant inclure des nœuds React ou une logique avancée dans les traductions.
   • Vous exigez un routage localisé intégré ou vous souhaitez l'incorporer facilement dans votre configuration SSR ou Vite.
   • Vous souhaitez une approche moderne ou voulez simplement une seule bibliothèque qui couvre à la fois la gestion de contenu (i18n) et le routage de manière sécurisée en termes de types.

7. Conclusion

Chaque bibliothèque offre une solution robuste pour internationaliser une application React :

• React-Intl excelle dans le formatage des messages et est un choix populaire pour les solutions d'entreprise axées sur la syntaxe des messages ICU.
• React-i18next fournit un environnement hautement flexible et piloté par des plugins pour des besoins i18n avancés ou dynamiques.
• Intlayer offre une approche moderne et fortement typée qui fusionne les déclarations de contenu, le routage localisé avancé et l'intégration pilotée par des plugins (CRA, Vite).

Votre choix dépend largement des exigences du projet, de l'expérience souhaitée des développeurs (DX) et de l'importance que vous accordez à des traductions typées ou à un routage avancé. Si vous valorisez un routage localisé intégré et l'intégration TypeScript, Intlayer pourrait être le plus attrayant. Si vous souhaitez une solution éprouvée, riche en écosystème, React-i18next est un excellent choix. Pour des besoins de formatage basés sur ICU simples, React-Intl est une option fiable.

Lecture supplémentaire

• Documentation de React-Intl
• Documentation de React-i18next
• Guide de démarrage Intlayer + CRA (de votre doc)
• Guide de démarrage Intlayer + Vite & React (de votre doc)

N'hésitez pas à combiner et assortir des approches pour répondre à vos exigences—il n'y a pas de solution unique, et chaque bibliothèque continue d'évoluer pour répondre à de nouveaux cas d'utilisation dans l'écosystème React.