Recevez des notifications en avant-première sur les prochains lancements de Intlayer
    Création:2024-08-14Dernière mise à jour:2025-08-20

    Pourquoi devriez-vous envisager Intlayer ?

    Qu'est-ce qu'Intlayer ?

    Intlayer est une bibliothèque d'internationalisation conçue spécifiquement pour les développeurs JavaScript. Elle permet la déclaration de votre contenu partout dans votre code. Elle convertit les déclarations de contenu multilingue en dictionnaires structurés pour une intégration facile dans votre code. En utilisant TypeScript, Intlayer rend votre développement plus robuste et plus efficace.

    Pourquoi Intlayer a-t-il été créé ?

    Intlayer a été créé pour résoudre un problème courant qui affecte toutes les bibliothèques i18n classiques telles que next-intl, react-i18next, react-intl, next-i18next, react-intl et vue-i18n.

    Toutes ces solutions adoptent une approche centralisée pour lister et gérer votre contenu. Par exemple :

    bash
    .├── locales│   ├── en.json│   ├── fr.json│   └── es.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    Ou ici en utilisant des namespaces :

    bash
    .├── locales│   ├── en│   │  ├── footer.json│   │  └── navbar.json│   ├── fr│   │  ├── footer.json│   │  └── navbar.json│   └── es│      ├── footer.json│      └── navbar.json├── i18n.ts└── src    └── components        └── MyComponent            └── index.tsx

    Ce type d'architecture ralentit le processus de développement et rend la base de code plus complexe à maintenir pour plusieurs raisons :

    1. Pour chaque nouveau composant créé, vous devez :

      • Créer la nouvelle ressource/namespace dans le dossier locales
      • Penser à importer le nouveau namespace dans votre page
      • Traduire votre contenu (souvent fait manuellement par copier/coller depuis des fournisseurs d'IA)
    2. Pour chaque modification apportée à vos composants, vous devez :

      • Rechercher la ressource/namespace concernée (loin du composant)
      • Traduire votre contenu
      • S'assurer que votre contenu est à jour pour chaque locale
      • Vérifier que votre namespace ne contient pas de clés/valeurs inutilisées
      • S'assurer que la structure de vos fichiers JSON est la même pour toutes les locales

    Sur les projets professionnels utilisant ces solutions, des plateformes de localisation sont souvent utilisées pour aider à gérer la traduction de votre contenu. Cependant, cela peut rapidement devenir coûteux pour les grands projets.

    Pour résoudre ce problème, Intlayer adopte une approche qui scope votre contenu par composant et garde votre contenu proche de votre composant, comme nous le faisons souvent avec le CSS (styled-components), les types, la documentation (storybook), ou les tests unitaires (jest).

    bash
    .└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx
    ./components/MyComponent/index.content.ts
    import { t, type Dictionary } from "intlayer";const componentExampleContent = {  key: "component-example",  content: {    myTranslatedContent: t({      en: "Hello World",      es: "Hola Mundo",      fr: "Bonjour le monde",    }),  },} satisfies Dictionary;export default componentExampleContent;
    ./components/MyComponent/index.tsx
    import { useIntlayer } from "react-intlayer";export const ComponentExample = () => {  const { myTranslatedContent } = useIntlayer("component-example");  return <span>{myTranslatedContent}</span>;};

    Cette approche vous permet de :

    1. Augmenter la vitesse de développement

      • Les fichiers .content.{{ts|mjs|cjs|json}} peuvent être créés à l'aide d'une extension VSCode
      • Les outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot) peuvent vous aider à déclarer votre contenu, réduisant ainsi le copier/coller
    2. Nettoyer votre base de code

      • Réduire la complexité
      • Augmenter la maintenabilité
    3. Dupliquer plus facilement vos composants et leur contenu associé (Exemple : composants de connexion/inscription, etc.)

      • En limitant le risque d'impacter le contenu d'autres composants
      • En copiant/collant votre contenu d'une application à une autre sans dépendances externes
    4. Éviter de polluer votre base de code avec des clés/valeurs inutilisées pour des composants non utilisés

      • Si vous ne utilisez pas un composant, Intlayer ne l'importera pas
      • Si vous supprimez un composant, vous vous souviendrez plus facilement de supprimer son contenu associé puisqu'il sera présent dans le même dossier
    5. Réduire le coût de raisonnement pour les agents IA afin de déclarer votre contenu multilingue

      • L'agent IA n'aura pas à scanner l'ensemble de votre base de code pour savoir où implémenter votre contenu
      • Les traductions peuvent facilement être réalisées par des outils d'autocomplétion IA dans votre IDE (comme GitHub Copilot)

    Fonctionnalités supplémentaires d'Intlayer

    Fonctionnalité Description
    Fonctionnalité Support Multi-Frameworks

    Intlayer est compatible avec tous les principaux frameworks et bibliothèques, y compris Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, et bien d'autres.
    Feature Gestion de contenu propulsée par JavaScript

    Exploitez la flexibilité de JavaScript pour définir et gérer votre contenu efficacement.

    - Déclaration de contenu
    Feature Fichier de Déclaration de Contenu par Langue

    Accélérez votre développement en déclarant votre contenu une seule fois, avant la génération automatique.

    - Fichier de Déclaration de Contenu par Langue
    Feature Environnement Typé

    Exploitez TypeScript pour garantir que vos définitions de contenu et votre code sont sans erreur, tout en bénéficiant de l'autocomplétion dans votre IDE.

    - Configuration TypeScript
    Fonctionnalité Configuration Simplifiée

    Démarrez rapidement avec une configuration minimale. Ajustez facilement les paramètres pour l’internationalisation, le routage, l’IA, la compilation et la gestion du contenu.

    - Explorer l’intégration Next.js
    Fonctionnalité Récupération de contenu simplifiée

    Pas besoin d'appeler votre fonction t pour chaque contenu. Récupérez tout votre contenu directement en utilisant un seul hook.

    - Intégration React
    Feature Implémentation cohérente des composants serveur

    Parfaitement adapté aux composants serveur Next.js, utilisez la même implémentation pour les composants client et serveur, sans avoir besoin de passer votre fonction t à travers chaque composant serveur.

    - Composants Serveur
    Feature Base de code organisée

    Gardez votre base de code plus organisée : 1 composant = 1 dictionnaire dans le même dossier. Les traductions proches de leurs composants respectifs améliorent la maintenabilité et la clarté.

    - Comment fonctionne Intlayer
    Fonctionnalité Routage Amélioré

    Prise en charge complète du routage d’application, s’adaptant parfaitement aux structures d’applications complexes, pour Next.js, React, Vite, Vue.js, etc.

    - Explorer l’intégration Next.js
    Fonctionnalité Support Markdown

    Importer et interpréter les fichiers de localisation et le Markdown distant pour du contenu multilingue comme les politiques de confidentialité, la documentation, etc. Interpréter et rendre les métadonnées Markdown accessibles dans votre code.

    - Fichiers de contenu
    Feature Éditeur Visuel Gratuit & CMS

    Un éditeur visuel gratuit et un CMS sont disponibles pour les rédacteurs de contenu, supprimant le besoin d'une plateforme de localisation. Gardez votre contenu synchronisé en utilisant Git, ou externalisez-le totalement ou partiellement avec le CMS.

    - Éditeur Intlayer
    - CMS Intlayer
    Feature Contenu Tree-shakable

    Contenu tree-shakable, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Supporte le chargement paresseux pour améliorer l'efficacité du chargement de l'application.

    - Optimisation de la construction de l'application
    Feature Rendu Statique

    Ne bloque pas le rendu statique.

    - Intégration Next.js
    Feature Traduction alimentée par l'IA

    Transformez votre site web en 231 langues en un seul clic grâce aux outils avancés de traduction alimentés par l'IA d'Intlayer utilisant votre propre fournisseur d'IA/clé API.

    - Intégration CI/CD
    - CLI Intlayer
    - Remplissage automatique
    Feature Intégration du serveur MCP

    Fournit un serveur MCP (Model Context Protocol) pour l'automatisation dans l'IDE, permettant une gestion fluide du contenu et des flux de travail i18n directement dans votre environnement de développement.

    - Serveur MCP
    Fonctionnalité Extension VSCode

    Intlayer propose une extension VSCode pour vous aider à gérer votre contenu et vos traductions, construire vos dictionnaires, traduire votre contenu, et plus encore.

    - Extension VSCode
    Fonctionnalité Interopérabilité

    Permet l'interopérabilité avec react-i18next, next-i18next, next-intl et react-intl.

    - Intlayer et react-intl
    - Intlayer et next-intl
    - Intlayer et next-i18next

    Comparaison d'Intlayer avec d'autres solutions

    Fonctionnalité Intlayer React-i18next / i18next React-Intl (FormatJS) LinguiJS next-intl next-i18next vue-i18n
    Traductions Près des Composants Oui, contenu collé avec chaque composant Non Non Non Non Non Oui - utilisant les Single File Components (SFCs)
    Intégration TypeScript Avancée, types stricts auto-générés Basique ; configuration supplémentaire pour la sécurité Bonne, mais moins stricte Typages, nécessite une configuration Bonne Basique Bonne (types disponibles ; configuration nécessaire pour la sécurité des clés)
    Détection des traductions manquantes Erreur/avertissement à la compilation Principalement des chaînes de secours à l'exécution Chaînes de secours Nécessite une configuration supplémentaire Chaînes de secours à l'exécution Chaînes de secours à l'exécution Chaînes de secours/avertissements à l'exécution (configurable)
    Contenu riche (JSX/Markdown/composants) Support direct, même pour les nœuds React Limité / interpolation uniquement Syntaxe ICU, pas de vrai JSX Limité Non conçu pour les nœuds riches Limité Limité (composants via <i18n-t>, Markdown via plugins)
    Traduction assistée par IA Oui, prend en charge plusieurs fournisseurs d'IA. Utilisable avec vos propres clés API. Prend en compte le contexte de votre application et la portée du contenu Non Non Non Non Non Non
    Éditeur Visuel Oui, éditeur visuel local + CMS optionnel ; peut externaliser le contenu de la base de code ; intégrable Non / disponible via des plateformes de localisation externes Non / disponible via des plateformes de localisation externes Non / disponible via des plateformes de localisation externes Non / disponible via des plateformes de localisation externes Non / disponible via des plateformes de localisation externes Non / disponible via des plateformes de localisation externes
    Routage localisé Intégré, support middleware Plugins ou configuration manuelle Non intégré Plugin/configuration manuelle Intégré Intégré Manuel via Vue Router (géré par Nuxt i18n)
    Génération dynamique des routes Oui Plugin/écosystème ou configuration manuelle Non fourni Plugin/manuelle Oui Oui Non fourni (Nuxt i18n le fournit)
    Pluriel Modèles basés sur l'énumération ; voir la documentation Configurable (plugins comme i18next-icu) Avancé (ICU) Avancé (ICU/messageformat) Bon Bon Avancé (règles de pluriel intégrées)
    Formatage (dates, nombres, devises) Formatteurs optimisés (Intl en interne) Via des plugins ou usage personnalisé d’Intl Formatteurs ICU avancés Aides ICU/CLI Bon (aides Intl) Bon (aides Intl) Formatteurs intégrés pour dates/nombres (Intl)
    Format de contenu .tsx, .ts, .js, .json, .md, .txt .json .json, .js .po, .json .json, .js, .ts .json .json, .js
    Support ICU En cours (ICU natif) Via plugin (i18next-icu) Oui Oui Oui Via plugin (i18next-icu) Via un formateur/compilateur personnalisé
    Aides SEO (hreflang, sitemap) Outils intégrés : aides pour sitemap, robots.txt, métadonnées Plugins communautaires / manuel Pas au cœur Pas au cœur Bon Bon Pas au cœur (Nuxt i18n fournit des aides)
    Écosystème / Communauté Plus petit mais en croissance rapide et réactif Le plus grand et le plus mature Grand, entreprise En croissance, plus petit Taille moyenne, axé sur Next.js Taille moyenne, axé sur Next.js Important dans l'écosystème Vue
    Rendu côté serveur & Composants Serveur Oui, optimisé pour le SSR / Composants Serveur React Pris en charge, configuration nécessaire Pris en charge dans Next.js Pris en charge Support complet Support complet SSR via Nuxt/Vue SSR (pas de RSC)
    Élimination des codes morts (chargement uniquement du contenu utilisé) Oui, par composant au moment de la compilation via les plugins Babel/SWC Charge généralement tout (peut être amélioré avec des espaces de noms/découpage de code) Charge généralement tout Pas par défaut Partiel Partiel Partiel (avec découpage de code/configuration manuelle)
    Chargement paresseux Oui, par locale/par composant Oui (par exemple, backends/namespaces à la demande) Oui (bundles de locale fractionnés) Oui (importations dynamiques de catalogues) Oui (par route/par locale) Oui (par route/par locale) Oui (messages de locale asynchrones)
    Gestion des grands projets Encourage la modularité, adapté aux design-systems Nécessite une bonne discipline des fichiers Les catalogues centraux peuvent devenir volumineux Peut devenir complexe Modulaire avec configuration Modulaire avec configuration Modulaire avec configuration Vue Router/Nuxt i18n

    Historique du document

    Version Date Modifications
    5.8.0 2025-08-19 Mise à jour du tableau comparatif
    5.5.10 2025-06-29 Historique initial
    Recevez des notifications en avant-première sur les prochains lancements de Intlayer