next-i18next VS next-intl VS Intlayer | Internationalisation Next.js (i18n)

Voici une comparaison concise de trois bibliothèques populaires pour l'internationalisation (i18n) d'une application Next.js : next-intl, next-i18next et Intlayer.

Ce document met en avant les critères clés :

1. Architecture (garder les traductions près de leurs composants)
2. Support TypeScript
3. Gestion des traductions manquantes
4. Support des composants serveur
5. Routage amélioré & middleware pour Next.js
6. Simplicité de configuration

Le guide fournit également un aperçu approfondi d'Intlayer, montrant pourquoi cela peut être un excellent choix—en particulier pour Next.js 13+, y compris App Router et Server Components.

---

Aperçu de Chaque Bibliothèque

1. next-intl

Focus principal : Configuration rapide et facile avec une approche légère de la localisation.

• Architecture : Encourage la co-localisation des traductions dans un seul dossier (par exemple, locales/) mais permet également plusieurs stratégies. N'impose pas strictement une architecture de « traduction par composant ».
• Support TypeScript : Intégration TypeScript basique. Certaines définitions de types existent, mais elles ne sont pas fortement centrées sur l'auto-génération de définitions TypeScript à partir de vos fichiers de traduction.
• Traductions manquantes : Mécanisme de repli basique. Par défaut, se repli sur une clé ou une chaîne de locale par défaut. Pas d'outils robustes dès la sortie de la boîte pour des vérifications avancées des traductions manquantes.
• Support des Composants Serveur : Fonctionne avec Next.js 13+ en général, mais le modèle est moins spécialisé pour une utilisation server-side profonde (par exemple, composants serveur avec routage dynamique complexe).
• Routage & Middleware : Le support de middleware est possible mais limité. Dépend généralement de Middleware de Next.js pour la détection de locale, ou de la configuration manuelle pour la réécriture des chemins de locale.
• Simplicité de configuration : Très simple. Un minimum de boilerplate est nécessaire.

Utiliser lorsque : Vous souhaitez une approche plus simple ou êtes à l'aise pour gérer vos traductions de manière plus conventionnelle (comme un dossier avec des fichiers JSON de locale).

---

2. next-i18next

Focus principal : Solution éprouvée utilisant i18next en arrière-plan, largement adoptée pour les projets Next.js.

• Architecture : Organise souvent les traductions dans le dossier public/locales. Pas spécifiquement conçu pour garder les traductions « proches » de chaque composant, bien que vous puissiez adopter manuellement une autre structure.
• Support TypeScript : Couverture raisonnable de TypeScript mais nécessite une configuration personnalisée pour les traductions typées et les hooks typés.
• Traductions manquantes : i18next offre des interpolations/replis. Cependant, la détection des traductions manquantes nécessite généralement une configuration supplémentaire ou des plugins tiers.
• Support des Composants Serveur : L'utilisation de base avec Next.js 13 est documentée, mais une utilisation avancée (par exemple, intégration profonde avec les composants serveur, génération de routes dynamiques) peut être fastidieuse.
• Routage & Middleware : Dépend fortement de Middleware de Next.js et des réécritures pour les sous-chemins de locale. Pour des configurations plus complexes, vous pourriez avoir besoin de plonger dans la configuration avancée d'i18next.
• Simplicité de configuration : Approche familière pour ceux qui sont habitués à i18next. Cependant, cela peut devenir plus lourd en boilerplate lorsque des fonctionnalités avancées de l'i18n sont nécessaires (noms de namespaces, plusieurs locales de repli, etc.).

Utiliser lorsque : Vous êtes déjà engagé dans l'écosystème i18next ou avez des traductions existantes basées sur i18next.

---

3. Intlayer

Focus principal : Une bibliothèque i18n moderne, open-source, spécifiquement conçue pour Next.js App Router (12, 13, 14 et 15) avec un support intégré pour Server Components et Turbopack.

Avantages clés

1. Architecture

   • Encourage à placer les traductions juste à côté de leurs composants. Chaque page ou composant peut avoir son propre fichier .content.ts (ou JSON)—plus besoin de fouiller dans un énorme dossier de traduction.
   • Cela rend votre code plus modulaire et maintenable, surtout dans de grandes bases de code.

2. Support TypeScript

   • Définitions de types auto-générées : Dès que vous définissez votre contenu, Intlayer génère des types qui alimentent l'auto-complétion et attrapent les erreurs de traduction.
   • Minimise les erreurs d'exécution comme les clés manquantes et offre une auto-complétion avancée directement dans votre IDE.

3. Gestion des Traductions Manquantes

   • Pendant la construction, Intlayer peut détecter les clés de traduction manquantes et lancer des avertissements ou des erreurs.
   • Cela garantit que vous ne shippez jamais accidentellement avec du texte manquant dans vos langues.

4. Optimisé pour les Composants Serveur

   • Entièrement compatible avec le App Router de Next.js et le nouveau paradigme des Composants Serveur.
   • Fournit des fournisseurs spécialisés (IntlayerServerProvider, IntlayerClientProvider) pour isoler le contexte serveur (vital lors du traitement avec Next.js 13+).

5. Routage Amélioré & Middleware

   • Inclut un intlayerMiddleware dédié pour la détection automatique de la locale (via des cookies ou des en-têtes de navigateur) et la génération avancée de routes.
   • Gère dynamiquement les chemins localisés (par ex., /en-US/about contre /fr/about) avec une configuration minimale.
   • Offre des méthodes d'assistance comme getMultilingualUrls pour générer des liens en langues alternatives (idéal pour le SEO).

6. Configuration Simplifiée

   • Un fichier de configuration unique (intlayer.config.ts) pour définir vos locales, la locale par défaut et les préférences d'intégration.
   • Un plugin-wrapper withIntlayer(nextConfig) qui injecte toutes les variables d'environnement et les observateurs pour votre contenu.
   • Pas de grandes configurations de repli—le système est conçu pour « fonctionner tout simplement » avec un minimum de friction.

En résumé : Intlayer est une solution moderne qui souhaite promouvoir les meilleures pratiques : de garder les traductions proches de chaque composant React, à offrir un robuste support TS et une utilisation facile côté serveur, tout en réduisant considérablement le boilerplate.

---

Comparaison des Fonctions Side-by-Side

---

Pourquoi Intlayer ?

Pour les équipes migrantes vers ou construisant sur le Next.js App Router (versions 13, 14 ou 15) avec des Composants Serveur, Intlayer fournit :

1. Une Architecture Simplifiée

   • Chaque route ou composant contient ses propres traductions. Cela favorise la clarté et la maintenabilité.

2. Intégration Puissante avec TypeScript

   • Vous bénéficiez d'une sécurité au niveau du compilateur, évitant les clés de traduction « sujettes aux fautes de frappe » ou manquantes.

3. Alertes de Traduction Manquante Réelles

   • Si vous oubliez une clé ou une traduction de langue, vous serez averti au moment de la construction (plutôt que d’expédier une UI incomplète).

4. Routage Avancé Intégré

   • La détection automatique de locale, la génération de routes dynamiques et la gestion facile des URL localisées sont incluses.
   • Un middleware standard intlayerMiddleware ne nécessite pas de réécritures personnalisées approfondies.

5. Configuration en Un Seul Endroit

   • Peu de boilerplate : définissez simplement votre intlayer.config.ts, enveloppez next.config avec withIntlayer, et ajoutez le middleware officiel.
   • Utilisation claire et directe pour les composants serveur et client via IntlayerServerProvider et IntlayerClientProvider.

6. Adapté au SEO

   • Des helpers intégrés (getMultilingualUrls, attributs hrefLang, etc.) facilitent la production de pages et de sitemaps conformes aux exigences SEO.

---

Exemple : Intlayer en Action

Voici un extrait très condensé illustrant comment utiliser Intlayer dans un projet Next.js 15. Pour les détails complets et les exemples de code, consultez le guide complet d'Intlayer.

Exemple étape par étape

1. Installer & Configurer

   bash

   npm install intlayer next-intlayer

   ts

   // intlayer.config.tsimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

2. Utiliser le Plugin

   ts

   // next.config.mjsimport { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

3. Ajouter le Middleware

   ts

   // src/middleware.tsexport { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

4. Créer une Mise en Page Localisée

   tsx

   // src/app/[locale]/layout.tsximport { getHTMLTextDir } from "intlayer";import { NextLayoutIntlayer } from "next-intlayer";const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body>{children}</body>    </html>  );};export { generateStaticParams } from "next-intlayer";export default LocaleLayout;

5. Déclarer & Utiliser le Contenu

   tsx

   // src/app/[locale]/page.content.tsimport { t } from "intlayer";export default {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",      }),      pageLink: "src/app/page.tsx",    },  },};

   tsx

   // src/app/[locale]/page.tsximport { IntlayerServerProvider } from "next-intlayer/server";import { IntlayerClientProvider, useIntlayer } from "next-intlayer";const PageContent = () => {  const { content } = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};export default function Page({ params }) {  return (    <IntlayerServerProvider locale={params.locale}>      <IntlayerClientProvider locale={params.locale}>        <PageContent />      </IntlayerClientProvider>    </IntlayerServerProvider>  );}

---

Conclusion

Chaque solution—next-intl, next-i18next, et Intlayer—s'est révélée efficace pour les projets Next.js multilingues. Cependant, Intlayer va plus loin en :

• Encourageant fortement une architecture de traduction au niveau des composants
• S'intégrant parfaitement avec Next.js 13+ et Server Components
• Offrant une puissante auto-génération TypeScript pour un code plus sûr
• Gérant les traductions manquantes au moment de la construction
• Fournissant une approche de configuration simplifiée et unique avec un routage et un middleware avancés

Si vous souhaitez des fonctionnalités i18n modernes adaptées à Next.js App Router et recherchez une expérience entièrement typée sans bricoler manuellement la logique de repli, les réécritures des routes ou des étapes de construction complexes, Intlayer est un choix convaincant. Cela réduit non seulement votre temps de configuration mais assure également une approche de traduction plus maintenable et évolutive pour votre équipe.