Internationalisation Next.js (i18n) avec next-i18next et Intlayer

Table des matières

Qu'est-ce que next-i18next ?

next-i18next est l'un des frameworks d'internationalisation (i18n) les plus populaires pour les applications Next.js. Construit sur l'écosystème puissant de i18next, il offre une solution complète pour gérer les traductions, la localisation et le changement de langue dans les projets Next.js.

Cependant, next-i18next présente certains défis :

• Configuration complexe : La mise en place de next-i18next nécessite plusieurs fichiers de configuration et une configuration minutieuse des instances i18n côté serveur et côté client.
• Traductions dispersées : Les fichiers de traduction sont généralement stockés dans des répertoires séparés des composants, ce qui complique le maintien de la cohérence.
• Gestion manuelle des namespaces : Les développeurs doivent gérer manuellement les namespaces et s'assurer du chargement correct des ressources de traduction.
• Sécurité de type limitée : Le support de TypeScript nécessite une configuration supplémentaire et ne fournit pas de génération automatique de types pour les traductions.

Qu'est-ce qu'Intlayer ?

Intlayer est une bibliothèque d'internationalisation innovante et open-source conçue pour pallier les lacunes des solutions i18n traditionnelles. Elle propose une approche moderne de la gestion de contenu dans les applications Next.js.

Consultez une comparaison concrète avec next-intl dans notre article de blog next-i18next vs. next-intl vs. Intlayer.

Pourquoi combiner Intlayer avec next-i18next ?

Bien qu'Intlayer offre une excellente solution i18n autonome (voir notre guide d'intégration Next.js), vous pourriez vouloir le combiner avec next-i18next pour plusieurs raisons :

1. Base de code existante : Vous disposez d'une implémentation next-i18next établie et souhaitez migrer progressivement vers la meilleure expérience développeur d'Intlayer.
2. Exigences héritées : Votre projet nécessite une compatibilité avec les plugins ou workflows i18next existants.
3. Familiarité de l'équipe : Votre équipe est à l'aise avec next-i18next mais souhaite une meilleure gestion du contenu.

Pour cela, Intlayer peut être implémenté comme un adaptateur pour next-i18next afin d'automatiser vos traductions JSON dans les pipelines CLI ou CI/CD, tester vos traductions, et plus encore.

Ce guide vous montre comment tirer parti du système supérieur de déclaration de contenu d'Intlayer tout en maintenant la compatibilité avec next-i18next.

Guide étape par étape pour configurer Intlayer avec next-i18next

Étape 1 : Installer les dépendances

Installez les paquets nécessaires en utilisant votre gestionnaire de paquets préféré :

npm install intlayer @intlayer/sync-json-plugin

Explications des paquets :

• intlayer : Bibliothèque principale pour la déclaration et la gestion de contenu
• @intlayer/sync-json-plugin : Plugin pour synchroniser les déclarations de contenu Intlayer au format JSON i18next

Étape 2 : Implémenter le plugin Intlayer pour envelopper le JSON

Créez un fichier de configuration Intlayer pour définir vos locales supportées :

Si vous souhaitez également exporter des dictionnaires JSON pour i18next, ajoutez le plugin syncJSON :

import { Locales, type IntlayerConfig } from "intlayer";import { syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  plugins: [    syncJSON({      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,    }),  ],};export default config;

Le plugin syncJSON enveloppera automatiquement le JSON. Il lira et écrira les fichiers JSON sans modifier l'architecture du contenu.

Si vous souhaitez faire coexister ce JSON avec les fichiers de déclaration de contenu intlayer (.content), Intlayer procédera de la manière suivante :

1. charger à la fois les fichiers JSON et les fichiers de déclaration de contenu et les transformer en un dictionnaire intlayer.2. s'il y a des conflits entre les fichiers JSON et les fichiers de déclaration de contenu, Intlayer procédera à la fusion de tous ces dictionnaires. Cela dépendra de la priorité des plugins, ainsi que de celle du fichier de déclaration de contenu (tout est configurable).

Si des modifications sont effectuées via la CLI pour traduire le JSON, ou en utilisant le CMS, Intlayer mettra à jour le fichier JSON avec les nouvelles traductions.

Pour plus de détails sur le plugin syncJSON, veuillez consulter la documentation du plugin syncJSON.

(Optionnel) Étape 3 : Implémenter des traductions JSON par composant

Par défaut, Intlayer chargera, fusionnera et synchronisera à la fois les fichiers JSON et les fichiers de déclaration de contenu. Voir la documentation sur la déclaration de contenu pour plus de détails. Mais si vous préférez, en utilisant un plugin Intlayer, vous pouvez également implémenter une gestion par composant des JSON localisés n'importe où dans votre base de code.

Pour cela, vous pouvez utiliser le plugin loadJSON.

import { Locales, type IntlayerConfig } from "intlayer";import { loadJSON, syncJSON } from "@intlayer/sync-json-plugin";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  // Gardez vos fichiers JSON actuels synchronisés avec les dictionnaires Intlayer  plugins: [    /**     * Chargera tous les fichiers JSON dans src qui correspondent au motif {key}.i18n.json     */    loadJSON({      source: ({ key }) => `./src/**/${key}.i18n.json`,      locale: Locales.ENGLISH,      priority: 1, // Assure que ces fichiers JSON ont la priorité sur les fichiers dans `./public/locales/en/${key}.json`    }),    /**     * Chargera et écrira la sortie ainsi que les traductions dans les fichiers JSON du répertoire des locales     */    syncJSON({      source: ({ key, locale }) => `./public/locales/${locale}/${key}.json`,      priority: 0,    }),  ],};export default config;

Cela chargera tous les fichiers JSON dans le répertoire src qui correspondent au modèle {key}.i18n.json et les chargera comme dictionnaires Intlayer.

Configuration Git

Exclure les fichiers générés du contrôle de version :

# Ignorer les fichiers générés par Intlayer.intlayerintl

Ces fichiers sont automatiquement régénérés lors du processus de build et n'ont pas besoin d'être commités dans votre dépôt.

Extension VS Code

Pour une meilleure expérience développeur, installez l’extension officielle Intlayer VS Code :

Installer depuis le Marketplace VS Code