@intlayer/docs 5.8.0-canary.0 → 5.8.1-canary.0

package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1,8 +1,8 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: next-i18next vs next-intl vs Intlayer
-description: Comparer next-i18next avec next-intl et Intlayer pour l'internationalisation (i18n) d'une application Next.js
+description: Comparaison de next-i18next avec next-intl et Intlayer pour l'internationalisation (i18n) d'une application Next.js
 keywords:
   - next-intl
   - next-i18next
@@ -17,269 +17,146 @@ slugs:
   - next-i18next-vs-next-intl-vs-intlayer
 ---
 
-# next-i18next VS next-intl VS Intlayer | Internationalisation Next.js (i18n)
+# next-i18next VS next-intl VS intlayer | Internationalisation (i18n) Next.js
 
-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 guide compare trois options i18n largement utilisées pour **Next.js** : **next-intl**, **next-i18next** et **Intlayer**.
+Nous nous concentrons sur **Next.js 13+ App Router** (avec **React Server Components**) et évaluons :
 
-Ce document met en avant les critères clés :
-
-1. **Architecture** (garder les traductions près de leurs composants)
-2. **Support TypeScript**
+1. **Architecture & organisation du contenu**
+2. **TypeScript & sécurité**
 3. **Gestion des traductions manquantes**
-4. **Support des composants serveur**
-5. **Routage amélioré & middleware** pour Next.js
-6. **Simplicité de configuration**
+4. **Routage & middleware**
+5. **Performance & comportement de chargement**
+6. **Expérience développeur (DX), outils & maintenance**
+7. **SEO & scalabilité pour les grands projets**
 
-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**.
+> **En résumé** : Les trois solutions peuvent localiser une application Next.js. Si vous souhaitez un **contenu scoped par composant**, des **types TypeScript stricts**, des **vérifications des clés manquantes à la compilation**, des **dictionnaires optimisés par tree-shaking**, ainsi que des **helpers App Router et SEO de première classe**, **Intlayer** est le choix le plus complet et moderne.
 
 ---
 
-## Aperçu de Chaque Bibliothèque
-
-### 1. next-intl
+## Positionnement général
 
-**Focus principal** : Configuration rapide et facile avec une approche légère de la localisation.
+- **next-intl** - Formatage de messages léger et simple avec un bon support Next.js. Les catalogues centralisés sont courants ; l’expérience développeur est simple, mais la sécurité et la maintenance à grande échelle restent principalement de votre responsabilité.
+- **next-i18next** - i18next habillé pour Next.js. Écosystème mature et fonctionnalités via des plugins (par exemple, ICU), mais la configuration peut être verbeuse et les catalogues ont tendance à se centraliser à mesure que les projets grandissent.
+- **Intlayer** - Modèle de contenu centré sur les composants pour Next.js, **typage TS strict**, **vérifications à la compilation**, **tree-shaking**, **middleware intégré et helpers SEO**, **éditeur visuel/CMS** optionnel, et **traductions assistées par IA**.
 
-- **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).
+## Comparaison des fonctionnalités côte à côte (axée sur Next.js)
+
+| Fonctionnalité                                              | `next-intlayer` (Intlayer)                                                                                                                                   | `next-intl`                                                                                                                                      | `next-i18next`                                                                                                                                   |
+| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Traductions Près des Composants**                         | ✅ Oui, contenu collé avec chaque composant                                                                                                                  | ❌ Non                                                                                                                                           | ❌ Non                                                                                                                                           |
+| **Intégration TypeScript**                                  | ✅ Avancée, types stricts générés automatiquement                                                                                                            | ✅ Bonne                                                                                                                                         | ⚠️ Basique                                                                                                                                       |
+| **Détection des Traductions Manquantes**                    | ✅ Mise en évidence des erreurs TypeScript et erreur/avertissement à la compilation                                                                          | ⚠️ Repli à l'exécution                                                                                                                           | ⚠️ Repli à l'exécution                                                                                                                           |
+| **Contenu Riche (JSX/Markdown/composants)**                 | ✅ Support direct                                                                                                                                            | ❌ Non conçu pour des nœuds riches                                                                                                               | ⚠️ Limité                                                                                                                                        |
+| **Traduction assistée par IA**                              | ✅ Oui, supporte 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                                                                                                                                           |
+| **É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                                                                                 |
+| **Routage Localisé**                                        | ✅ Oui, supporte les chemins localisés nativement (fonctionne avec Next.js & Vite)                                                                           | ✅ Intégré, App Router supporte le segment `[locale]`                                                                                            | ✅ Intégré                                                                                                                                       |
+| **Génération Dynamique de Routes**                          | ✅ Oui                                                                                                                                                       | ✅ Oui                                                                                                                                           | ✅ Oui                                                                                                                                           |
+| **Pluriels**                                                | ✅ Modèles basés sur des énumérations                                                                                                                        | ✅ Bon                                                                                                                                           | ✅ Bon                                                                                                                                           |
+| **Formatage (dates, nombres, devises)**                     | ✅ Formatteurs optimisés (Intl en interne)                                                                                                                   | ✅ Bon (helpers Intl)                                                                                                                            | ✅ Bon (helpers Intl)                                                                                                                            |
+| **Format de contenu**                                       | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml en cours de développement)                                                                                       | ✅ .json, .js, .ts                                                                                                                               | ⚠️ .json                                                                                                                                         |
+| **Support ICU**                                             | ⚠️ En cours de développement                                                                                                                                 | ✅ Oui                                                                                                                                           | ⚠️ Via plugin (`i18next-icu`)                                                                                                                    |
+| **Aides SEO (hreflang, sitemap)**                           | ✅ Outils intégrés : aides pour sitemap, robots.txt, métadonnées                                                                                             | ✅ Bon                                                                                                                                           | ✅ Bon                                                                                                                                           |
+| **Écosystème / Communauté**                                 | ⚠️ Plus petite mais en croissance rapide et réactive                                                                                                         | ✅ Taille moyenne, axée sur Next.js                                                                                                              | ✅ Taille moyenne, axée sur Next.js                                                                                                              |
+| **Rendu côté serveur & Composants Serveur**                 | ✅ Oui, optimisé pour SSR / Composants Serveur React                                                                                                         | ⚠️ Pris en charge au niveau de la page mais nécessite de passer les fonctions t dans l’arbre des composants pour les composants serveurs enfants | ⚠️ Pris en charge au niveau de la page mais nécessite de passer les fonctions t dans l’arbre des composants pour les composants serveurs enfants |
+| **Tree-shaking (chargement uniquement du contenu utilisé)** | ✅ Oui, par composant au moment de la compilation via les plugins Babel/SWC                                                                                  | ⚠️ Partiel                                                                                                                                       | ⚠️ Partiel                                                                                                                                       |
+| **Chargement paresseux**                                    | ✅ Oui, par locale / par dictionnaire                                                                                                                        | ✅ Oui (par route / par locale), nécessite une gestion des espaces de noms                                                                       | ✅ Oui (par route / par locale), nécessite une gestion des espaces de noms                                                                       |
+| **Purge du contenu inutilisé**                              | ✅ Oui, par dictionnaire au moment de la compilation                                                                                                         | ❌ Non, peut être géré manuellement avec la gestion des espaces de noms                                                                          | ❌ Non, peut être géré manuellement avec la gestion des espaces de noms                                                                          |
+| **Gestion des grands projets**                              | ✅ Encourage la modularité, adapté aux design-systems                                                                                                        | ✅ Modulaire avec configuration                                                                                                                  | ✅ Modulaire avec configuration                                                                                                                  |
 
 ---
 
-### 2. next-i18next
+## Comparaison approfondie
 
-**Focus principal** : Solution éprouvée utilisant `i18next` en arrière-plan, largement adoptée pour les projets Next.js.
+### 1) Architecture et évolutivité
 
-- **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.).
+- **next-intl / next-i18next** : Par défaut, utilise des **catalogues centralisés** par locale (plus les **espaces de noms** dans i18next). Fonctionne bien au début, mais devient souvent une grande surface partagée avec un couplage croissant et une forte rotation des clés.
+- **Intlayer** : Encourage les dictionnaires **par composant** (ou par fonctionnalité) **co-localisés** avec le code qu’ils servent. Cela réduit la charge cognitive, facilite la duplication/migration des éléments UI, et diminue les conflits entre équipes. Le contenu inutilisé est naturellement plus facile à repérer et à purger.
 
-**Utiliser lorsque** : Vous êtes déjà engagé dans l'écosystème `i18next` ou avez des traductions existantes basées sur i18next.
+**Pourquoi c’est important :** Dans les grandes bases de code ou les configurations de design-systems, le **contenu modulaire** évolue mieux que les catalogues monolithiques.
 
 ---
 
-### 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**.
+### 2) TypeScript & sécurité
 
-#### Avantages clés
+- **next-intl** : Support solide de TypeScript, mais les **clés ne sont pas strictement typées par défaut** ; vous devrez maintenir manuellement les patterns de sécurité.
+- **next-i18next** : Typages de base pour les hooks ; la **typage strict des clés nécessite des outils/configurations supplémentaires**.
+- **Intlayer** : **Génère des types stricts** à partir de votre contenu. L’**autocomplétion dans l’IDE** et les **erreurs à la compilation** détectent les fautes de frappe et les clés manquantes avant le déploiement.
 
-1. **Architecture**
+**Pourquoi c’est important :** Le typage fort déplace les erreurs vers la **gauche** (CI/build) au lieu de la **droite** (exécution).
 
-   - 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.
+### 3) Gestion des traductions manquantes
 
-4. **Optimisé pour les Composants Serveur**
+- **next-intl / next-i18next** : Dépendent des **solutions de secours à l’exécution** (par exemple, afficher la clé ou la locale par défaut). La compilation ne plante pas.
+- **Intlayer** : **Détection à la compilation** avec des **avertissements/erreurs** pour les locales ou clés manquantes.
 
-   - 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+).
+**Pourquoi c’est important :** Détecter les lacunes lors de la compilation évite les « chaînes mystères » en production et s’aligne avec des règles strictes de publication.
 
-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**).
+### 4) Routage, middleware & stratégie d’URL
 
-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.
+- Les trois fonctionnent avec le **routage localisé Next.js** sur l’App Router.
+- **Intlayer** va plus loin avec un **middleware i18n** (détection de la locale via les headers/cookies) et des **helpers** pour générer des URLs localisées et des balises `<link rel="alternate" hreflang="…">`.
 
-> **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**.
+**Pourquoi c’est important :** Moins de couches de liaison personnalisées ; **expérience utilisateur cohérente** et **SEO propre** à travers les locales.
 
 ---
 
-## Comparaison des Fonctions Side-by-Side
-
-| **Fonctionnalité**                                | **next-intl**                                | **next-i18next**                                                | **Intlayer**                                          |
-| ------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------------- |
-| **Conserver les traductions près des composants** | Partiel – généralement un dossier de locales | Pas par défaut – souvent `public/locales`                       | **Oui – recommandé & facile**                         |
-| **TypeScript Auto-généré**                        | Définition TS de base                        | Support TS de base                                              | **Oui – avancé dès la sortie de la boîte**            |
-| **Détection des traductions manquantes**          | Principalement des chaînes de repli          | Principalement des chaînes de repli                             | **Oui – vérifications au moment de la construction**  |
-| **Support des Composants Serveur**                | Fonctionne mais pas spécialisé               | Supporté mais peut être verbeux                                 | **Support complet avec des fournisseurs spécialisés** |
-| **Routage & Middleware**                          | Intégré manuellement avec Next middleware    | Fournie via la réécriture de config                             | **Middleware i18n dédié + hooks avancés**             |
-| **Complexité de Configuration**                   | Simple, configuration minimale               | Traditionnelle, peut être verbeuse pour une utilisation avancée | **Un fichier de config & plugin**                     |
-
----
+### 5) Alignement avec les Server Components (RSC)
 
-## Pourquoi Intlayer ?
+- **Tous** supportent Next.js 13+.
+- **Intlayer** facilite la **frontière serveur/client** avec une API cohérente et des providers conçus pour RSC, évitant ainsi de passer des formateurs ou des fonctions t à travers les arbres de composants.
 
-Pour les équipes migrantes vers ou construisant sur le **Next.js App Router** (versions 13, 14 ou 15) avec des **Composants Serveur**, Intlayer fournit :
+**Pourquoi c’est important :** Modèle mental plus clair et moins de cas limites dans les arbres hybrides.
 
-1. **Une Architecture Simplifiée**
+---
 
-   - Chaque route ou composant contient ses propres traductions. Cela favorise la clarté et la maintenabilité.
+### 6) Performance et comportement de chargement
 
-2. **Intégration Puissante avec TypeScript**
+- **next-intl / next-i18next** : Contrôle partiel via les **espaces de noms** et les **découpages au niveau des routes** ; risque d’inclure des chaînes inutilisées si la discipline n’est pas respectée.
+- **Intlayer** : Effectue du **tree-shaking** à la compilation et **charge paresseusement par dictionnaire/locale**. Le contenu inutilisé n’est pas inclus.
 
-   - 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.
+**Pourquoi c’est important :** Des bundles plus petits et un démarrage plus rapide, surtout sur des sites multi-locales.
 
-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).
+### 7) Expérience développeur, outils et maintenance
 
-4. **Routage Avancé Intégré**
+- **next-intl / next-i18next** : Vous connecterez généralement des plateformes externes pour les traductions et les flux éditoriaux.
+- **Intlayer** : Propose un **éditeur visuel gratuit** et un **CMS optionnel** (compatible Git ou externalisé). Plus une **extension VSCode** pour la rédaction de contenu et des **traductions assistées par IA** utilisant vos propres clés de fournisseur.
 
-   - 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.
+**Pourquoi c’est important :** Réduit les coûts opérationnels et raccourcit la boucle entre les développeurs et les auteurs de contenu.
 
-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`.
+## Quand choisir quoi ?
 
-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.
+- **Choisissez next-intl** si vous souhaitez une solution **minimale**, que vous êtes à l’aise avec des catalogues centralisés, et que votre application est de taille **petite à moyenne**.
+- **Choisissez next-i18next** si vous avez besoin de **l’écosystème de plugins d’i18next** (par exemple, des règles ICU avancées via des plugins) et que votre équipe connaît déjà i18next, acceptant une **configuration plus importante** pour plus de flexibilité.
+- **Choisissez Intlayer** si vous valorisez le **contenu scoped par composant**, un **TypeScript strict**, des **garanties à la compilation**, le **tree-shaking**, et des outils de routage/SEO/édition **tout-en-un** - particulièrement pour le **Next.js App Router** et les **bases de code larges et modulaires**.
 
 ---
 
-## 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](#).
-
-<details>
-<summary>Exemple étape par étape</summary>
-
-1. **Installer & Configurer**
-
-   ```bash
-   npm install intlayer next-intlayer
-   ```
-
-   ```ts
-   // intlayer.config.ts
-   import { 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.mjs
-   import { withIntlayer } from "next-intlayer/server";
-
-   /** @type {import('next').NextConfig} */
-   const nextConfig = {};
-
-   export default withIntlayer(nextConfig);
-   ```
-
-3. **Ajouter le Middleware**
-
-   ```ts
-   // src/middleware.ts
-   export { 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.tsx
-   import { 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.ts
-   import { 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.tsx
-   import { 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>
-     );
-   }
-   ```
-
-   </details>
+## Notes pratiques de migration (next-intl / next-i18next → Intlayer)
+
+- **Commencez par fonctionnalité** : Déplacez une route ou un composant à la fois vers des **dictionnaires locaux**.
+- **Conservez les anciens catalogues en parallèle** : Assurez une transition progressive ; évitez un changement brutal.
+- **Activez les vérifications strictes** : Laissez la détection à la compilation révéler les lacunes tôt.
+- **Adoptez middleware et helpers** : Standardisez la détection de la locale et les balises SEO sur tout le site.
+- **Mesurez les bundles** : Attendez-vous à des **réductions de taille des bundles** grâce à la suppression du contenu inutilisé.
 
 ---
 
 ## 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 :
+Les trois bibliothèques réussissent la localisation de base. La différence réside dans **la quantité de travail nécessaire** pour obtenir une configuration robuste et évolutive dans **Next.js moderne** :
 
-- **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
+- Avec **Intlayer**, le **contenu modulaire**, le **TS strict**, la **sécurité à la compilation**, les **bundles optimisés par tree-shaking**, ainsi que un **App Router et des outils SEO de première classe** sont des **paramètres par défaut**, et non des corvées.
+- Si votre équipe valorise la **maintenabilité et la rapidité** dans une application multi-locale pilotée par composants, Intlayer offre aujourd’hui l’expérience la **plus complète**.
 
-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.
+Consultez le document ['Pourquoi Intlayer ?'](https://intlayer.org/doc/why) pour plus de détails.