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 s'intégrer facilement dans votre code. En utilisant TypeScript, Intlayer rend votre développement plus robuste et plus efficace.

Pourquoi Intlayer plutôt que des alternatives ?

Par rapport aux solutions principales telles que next-intl ou i18next, Intlayer est une solution dotée d'optimisations intégrées telles que :

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 habituelles telles que next-intl, react-i18next, react-intl, next-i18next, react-intl et vue-i18n.

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

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

Ou ici en utilisant des espaces de noms (namespaces) :

.├── 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/espace de noms dans le dossier locales
   • Vous rappeler d'importer le nouvel espace de noms dans votre page
   • Traduire votre contenu (souvent fait manuellement par copier-coller depuis des outils d'IA)

2. Pour chaque changement apporté à vos composants, vous devez :

   • Rechercher la ressource/espace de noms associé (loin du composant)
   • Traduire votre contenu
   • Vous assurer que votre contenu est à jour pour chaque langue
   • Vérifier que votre espace de noms ne contient pas de clés/valeurs inutilisées
   • Vous assurer que la structure de vos fichiers JSON est identique pour toutes les langues

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 délimite votre contenu par composant et le garde à proximité du composant, comme on le fait souvent avec le CSS (styled-components), les types, la documentation (storybook) ou les tests unitaires (jest).

.└── components    └── MyComponent        ├── index.content.ts        ├── index.test.tsx        ├── index.stories.tsx        └── index.tsx

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;

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 de votre IDE (tels que GitHub Copilot) peuvent vous aider à déclarer votre contenu, réduisant le copier-coller

2. Nettoyer votre base de code

   • Réduire la complexité
   • Augmenter la maintenabilité

3. Dupliquer vos composants et leur contenu associé plus facilement (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 n'utilisez pas un composant, Intlayer n'importera pas son contenu associé
   • Si vous supprimez un composant, vous vous souviendrez plus facilement de supprimer son contenu associé car il sera présent dans le même dossier

5. Réduire le coût de raisonnement pour les agents IA pour déclarer votre contenu multilingue

   • L'agent IA n'aura pas à parcourir toute votre base de code pour savoir où implémenter votre contenu
   • Les traductions peuvent facilement être effectuées par des outils d'autocomplétion IA dans votre IDE (tels que GitHub Copilot)

6. Optimiser les performances de chargement

   • Si un composant est chargé à la demande (lazy-loaded), son contenu associé sera chargé en même temps

Fonctionnalités supplémentaires d'Intlayer

Afficher tout le contenu du tableau

Afficher tout le contenu du tableau

Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement

Fonctionnalité	Description
	Support multi-frameworks Intlayer est compatible avec tous les frameworks et bibliothèques majeurs, y compris Next.js, React, Vite, Vue.js, Nuxt, Preact, Express et plus encore.
	Gestion de contenu propulsée par JavaScript Exploitez la flexibilité de JavaScript pour définir et gérer efficacement votre contenu. - Déclaration de contenu
	Compilateur Le compilateur d'Intlayer extrait automatiquement le contenu des composants et génère les fichiers de dictionnaire. - Compilateur
	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
	Environnement sécurisé par typage Bénéficiez de TypeScript pour vous assurer que vos définitions de contenu et votre code sont exempts d'erreurs, tout en profitant de l'autocomplétion de votre IDE. - Configuration de TypeScript
	Configuration simplifiée Démarrez rapidement avec une configuration minimale. Ajustez facilement les paramètres d'internationalisation, de routage, d'IA, de build et de gestion du contenu. - Explorer l'intégration Next.js
	Récupération simplifiée du contenu Pas besoin d'appeler votre fonction t pour chaque élément de contenu. Récupérez tout votre contenu directement à l'aide d'un seul hook. - Intégration React
	Implémentation cohérente des composants serveur Parfaitement adapté aux composants serveur de Next.js, utilisez la même implémentation pour les composants client et serveur, pas besoin de passer votre fonction t à travers chaque composant serveur. - Composants serveur
	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
	Routage amélioré Prise en charge complète du routage d'applications, s'adaptant parfaitement aux structures d'applications complexes, pour Next.js, React, Vite, Vue.js, etc. - Explorer l'intégration Next.js
	Support de Markdown Importez et interprétez des fichiers locaux et du Markdown distant pour du contenu multilingue tel que les politiques de confidentialité, la documentation, etc. Interprétez et rendez les métadonnées Markdown accessibles dans votre code. - Fichiers de contenu
	Éditeur visuel et CMS gratuits Un éditeur visuel et un CMS gratuits sont disponibles pour les rédacteurs de contenu, éliminant le besoin d'une plateforme de localisation. Gardez votre contenu synchronisé avec Git, ou externalisez-le totalement ou partiellement avec le CMS. - Éditeur Intlayer - CMS Intlayer
	Contenu éliminable au build (Tree-shakable) Contenu éliminable au build, réduisant la taille du bundle final. Charge le contenu par composant, excluant tout contenu inutilisé de votre bundle. Prend en charge le chargement différé (lazy loading) pour améliorer l'efficacité du chargement de l'application. - Optimisation du build de l'application
	Rendu statique Ne bloque pas le rendu statique. - Intégration Next.js
	Traduction propulsée par l'IA Transformez votre site Web en 231 langues en un seul clic à l'aide des outils de traduction IA avancés d'Intlayer avec votre propre fournisseur d'IA/clé API. - Intégration CI/CD - CLI Intlayer - Remplissage automatique
	Intégration du serveur MCP Fournit un serveur MCP (Model Context Protocol) pour l'automatisation de l'IDE, permettant une gestion transparente du contenu et des flux de travail i18n directement dans votre environnement de développement. - Serveur MCP
	Extension VSCode Intlayer fournit une extension VSCode pour vous aider à gérer votre contenu et vos traductions, à construire vos dictionnaires, à traduire votre contenu, et plus encore. - Extension VSCode
	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
Tester les traductions manquantes (CLI/CI)	✅ CLI : npx intlayer content test (audit compatible CI)

Comparaison d'Intlayer avec d'autres solutions

Étoiles GitHub

Les étoiles GitHub sont un indicateur fort de la popularité d'un projet, de la confiance de la communauté et de sa pertinence à long terme. Bien qu'elles ne soient pas une mesure directe de la qualité technique, elles reflètent le nombre de développeurs qui trouvent le projet utile, suivent ses progrès et sont susceptibles de l'adopter. Pour estimer la valeur d'un projet, les étoiles aident à comparer l'attraction entre les alternatives et fournissent des informations sur la croissance de l'écosystème.

Interopérabilité

intlayer peut également aider à gérer vos espaces de noms react-intl, react-i18next, next-intl, next-i18next et vue-i18n.

En utilisant intlayer, vous pouvez déclarer votre contenu dans le format de votre bibliothèque i18n préférée, et intlayer générera vos espaces de noms à l'emplacement de votre choix (exemple : /messages/{{locale}}/{{namespace}}.json).