Internationalisation avec Intlayer et i18next

i18next est un framework open-source d'internationalisation (i18n) conçu pour les applications JavaScript. Il est largement utilisé pour gérer les traductions, la localisation et le changement de langue dans les projets logiciels. Cependant, il présente certaines limitations qui peuvent compliquer l'évolutivité et le développement.

Intlayer est un autre framework d'internationalisation qui répond à ces limitations, offrant une approche plus flexible pour la déclaration et la gestion du contenu. Explorons quelques différences clés entre i18next et Intlayer, et comment configurer les deux pour une internationalisation optimale.

Intlayer vs. i18next : Différences clés

1. Déclaration du contenu

Avec i18next, les dictionnaires de traduction doivent être déclarés dans un dossier spécifique, ce qui peut compliquer l'évolutivité de l'application. En revanche, Intlayer permet de déclarer le contenu dans le même répertoire que votre composant. Cela présente plusieurs avantages :

Édition simplifiée du contenu : Les utilisateurs n'ont pas à chercher le bon dictionnaire à éditer, réduisant ainsi le risque d'erreurs.
Adaptation automatique : Si un composant change de place ou est supprimé, Intlayer détecte et s'adapte automatiquement.

2. Complexité de la configuration

Configurer i18next peut être complexe, surtout lors de l'intégration avec des composants côté serveur ou de la configuration de middleware pour des frameworks comme Next.js. Intlayer simplifie ce processus, offrant une configuration plus simple.

3. Cohérence des dictionnaires de traduction

Assurer que les dictionnaires de traduction sont cohérents entre différentes langues peut être difficile avec i18next. Cette incohérence peut entraîner des plantages de l'application si elle n'est pas correctement gérée. Intlayer résout ce problème en appliquant des contraintes sur le contenu traduit, garantissant qu'aucune traduction n'est manquée et que le contenu traduit est précis.

4. Intégration avec TypeScript

Intlayer offre une meilleure intégration avec TypeScript, permettant des suggestions automatiques de contenu dans votre code, améliorant ainsi l'efficacité du développement.

5. Partage de contenu entre applications

Intlayer facilite le partage de fichiers de déclaration de contenu entre plusieurs applications et bibliothèques partagées. Cette fonctionnalité permet de maintenir des traductions cohérentes dans une base de code plus large.

Comment générer des dictionnaires i18next avec Intlayer

Configuration d'Intlayer pour exporter des dictionnaires i18next

Remarques importantes L'exportation des dictionnaires i18next est actuellement en version bêta et ne garantit pas une compatibilité 1:1 avec d'autres frameworks. Il est recommandé de s'en tenir à une configuration basée sur Intlayer pour minimiser les problèmes.

Pour exporter des dictionnaires i18next, vous devez configurer Intlayer de manière appropriée. Voici un exemple de configuration d'Intlayer pour exporter à la fois des dictionnaires Intlayer et i18next.

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  content: {
    // Indiquer qu'Intlayer exportera à la fois des dictionnaires Intlayer et i18next
    dictionaryOutput: ["intlayer", "i18next"],
    // Chemin relatif depuis la racine du projet vers le répertoire où les dictionnaires i18n seront exportés
    i18nDictionariesDir: "./i18n/dictionaries",
  },
};

export default config;

En incluant 'i18next' dans la configuration, Intlayer génère des dictionnaires i18next dédiés en plus des dictionnaires Intlayer. Notez que la suppression de 'intlayer' de la configuration peut rendre le projet incompatible avec React-Intlayer ou Next-Intlayer.

Importation des dictionnaires dans votre configuration i18next

Pour importer les dictionnaires générés dans votre configuration i18next, vous pouvez utiliser 'i18next-resources-to-backend'. Voici un exemple d'importation de vos dictionnaires i18next :

// i18n/client.ts

import i18next from "i18next";
import resourcesToBackend from "i18next-resources-to-backend";

i18next
  // Votre configuration i18next
  .use(
    resourcesToBackend(
      (language: string, namespace: string) =>
        import(`../i18n-dictionaries/${language}/${namespace}.json`)
    )
  );