@intlayer/docs 9.4.1 → 9.4.3

package/blog/fr/i18n_testing_strategies.md

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Comment tester les traductions sans écrire de tests fragiles"
+description: Ce qui vaut la peine d'être testé dans une application i18n et ce qui ne l'est pas. Tests de rendu avec provider, pseudolocalisation, couverture RTL et pluriels, et le piège des snapshots.
+keywords:
+  - tester traductions
+  - tests i18n
+  - testing library i18n
+  - pseudolocalisation
+  - test provider locale
+  - snapshot test i18n
+slugs:
+  - blog
+  - i18n-testing-strategies
+author: aymericzip
+---
+
+# Comment tester les traductions sans écrire de tests fragiles
+
+La plupart des suites de tests i18n échouent de deux manières. Soit elles vérifient le texte littéral, de sorte que chaque modification de formulation casse cinquante tests et pousse l'équipe à les supprimer. Soit elles effectuent le rendu uniquement dans la locale par défaut, ne prouvant rien sur les dix-sept autres. Les deux mènent au même résultat, une suite en laquelle personne n'a confiance.
+
+## Table des matières
+
+<TOC/>
+
+## Les patterns sont indépendants de la bibliothèque
+
+Chaque pattern ci-dessous fonctionne sur n'importe quelle stack i18n. Remplacez le provider par `I18nextProvider`, `NextIntlClientProvider` ou `IntlProvider` et les tests restent identiques, car ils valident la sortie rendue plutôt qu'une API spécifique.
+
+L'outillage de couverture s'adapte également : avec le [plugin Sync JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md) branché sur vos catalogues existants, ou un [adaptateur de compatibilité](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/index.md) créant un alias sur vos imports actuels, la vérification de couverture s'exécute sur le JSON déjà en place.
+
+## Déterminer ce que vous testez réellement
+
+La qualité d'une traduction ne se teste pas par assertion. Aucune assertion ne vous dira si l'allemand est idiomatique, et prétendre le contraire produit une suite encombrée de chaînes écrites en dur.
+
+Ce qui mérite d'être testé est mécanique :
+
+| Vaut la peine d'être testé                | Ne vaut pas la peine d'être testé |
+| :---------------------------------------- | :-------------------------------- |
+| Chaque locale requise possède une valeur  | La formulation est-elle élégante  |
+| La bonne locale parvient au composant     | Le libellé exact de chaque texte  |
+| Les pluriels fonctionnent pour chaque cas | Le traducteur a bien fait son job |
+| Les locales RTL appliquent sens et miroir | Chaque chaîne dans chaque locale  |
+| Les dates et nombres respectent la locale | L'exactitude interne d'`Intl`     |
+
+La couverture relève d'un seul test automatisé orienté données, et non de vos tests de composants. Ce sujet est abordé dans [détecter les traductions manquantes](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/detecting_missing_translations.md) ; cet article traite du reste.
+
+## Effectuer le rendu dans un provider et cibler par rôle
+
+Le pattern central consiste à monter le composant au sein d'un provider de locale et à interroger par rôle ou identifiant de test plutôt que par le texte.
+
+```tsx fileName="CartSummary.test.tsx"
+import { render, screen } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+import { CartSummary } from "./CartSummary";
+
+test("affiche le titre du récapitulatif en français", () => {
+  render(
+    <IntlayerProvider locale="fr-FR">
+      <CartSummary />
+    </IntlayerProvider>
+  );
+
+  expect(screen.getByRole("heading")).toBeInTheDocument();
+});
+```
+
+Interroger `getByRole("heading")` résiste aux changements de texte. `getByText("Récapitulatif")` échoue au moindre ajustement. N'utilisez le texte exact que lorsque la chaîne elle-même constitue l'élément testé, ce qui reste rare.
+
+Pour les attributs comme `aria-label`, vous avez besoin de la chaîne brute plutôt que d'un nœud affichable. Dans React, les entrées `useIntlayer` exposent un champ `.value` pour cela.
+
+## Paramétrer les tests à travers les locales
+
+Un seul corps de test exécuté sur chaque locale apporte bien plus de valeur qu'un test distinct par locale.
+
+```tsx fileName="direction.test.tsx"
+import { getHTMLTextDir } from "intlayer";
+import { render } from "@testing-library/react";
+import { IntlayerProvider } from "react-intlayer/client";
+
+describe.each(["en", "fr", "ja", "ar"])("locale %s", (locale) => {
+  it("s'affiche sans revenir à la clé brute", () => {
+    const { container } = render(
+      <IntlayerProvider locale={locale}>
+        <CartSummary />
+      </IntlayerProvider>
+    );
+
+    // Une clé affichée signifie que la résolution a échoué.
+    expect(container.textContent).not.toMatch(/^[a-z]+(\.[a-z]+)+$/);
+  });
+
+  it("définit la bonne direction de texte", () => {
+    expect(getHTMLTextDir(locale)).toBe(locale === "ar" ? "rtl" : "ltr");
+  });
+});
+```
+
+La première assertion constitue un gain générique appréciable : si une clé échoue et que votre bibliothèque affiche la clé, le DOM contient une structure du type `cart.summary.title`. Cela détecte toute une classe de bugs sans citer une seule phrase.
+
+## La pseudolocalisation révèle ce que les catalogues ne voient pas
+
+Ajoutez une fausse locale qui transforme chaque chaîne, par exemple en remplaçant `Checkout` par `[!!! Çĥéçķöũţ !!!]`. Affichez ensuite la page dans cette langue.
+
+Tout ce qui apparaît encore en anglais standard est écrit en dur dans le code. Aucun contrôle basé sur un catalogue ne peut l'identifier, car du point de vue des outils, la chaîne n'existe pas. Les crochets jouent un second rôle : ils allongent le texte d'environ 30 pour cent, révélant les ruptures de mise en page avant même de tester l'allemand.
+
+Ce contrôle s'exécute idéalement lors d'une passe visuelle ou end-to-end plutôt qu'en test unitaire, car l'erreur saute directement aux yeux.
+
+## Les pluriels exigent un test par catégorie, pas par langue
+
+Les anomalies de pluriel passent inaperçues car l'anglais n'utilise que deux formes, sur lesquelles la majorité des développeurs se concentrent. Le polonais en compte quatre, l'arabe six.
+
+```ts fileName="plural.test.ts"
+// L'arabe couvre zero, one, two, few, many, other.
+describe.each([0, 1, 2, 3, 11, 100])("quantité %i", (count) => {
+  it("produit une chaîne non vide en arabe", () => {
+    expect(formatItems(count, "ar")).not.toBe("");
+  });
+});
+```
+
+Choisissez des nombres ciblant chaque catégorie CLDR pour votre langue la plus complexe, plutôt que de vous limiter à 1 et 2 partout. `Intl.PluralRules` indique la catégorie attribuée à un nombre, ce qui permet de déduire vos jeux de test sans tâtonner. Retrouvez plus de précisions sur les catégories dans [l'article sur le format de message ICU](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/icu_message_format.md).
+
+## Le piège des tests par instantané (snapshots)
+
+Les snapshots et l'internationalisation font mauvais ménage. Le snapshot d'un composant localisé fige chaque chaîne. Dès qu'un traducteur corrige une faute en portugais, une suite verte devient rouge, sur un fichier qu'aucun relecteur ne comprend vraiment. Au bout de quelques alertes, quelqu'un relance `-u` sans lire le diff, et les snapshots perdent toute valeur.
+
+Si vous tenez aux snapshots, prenez-les dans une seule locale et traitez-les comme un contrôle structurel plutôt que textuel. Tout ce qui dépend d'une locale spécifique doit faire l'objet d'assertions ciblées.
+
+## Tester la négociation de la locale, pas seulement le rendu
+
+Le bug i18n le plus fréquent en production n'est pas une chaîne manquante. C'est le choix d'une mauvaise locale : une URL indique `/fr/`, le client lit `navigator.language`, et les deux entrent en conflit.
+
+Testez la logique de résolution directement, sous forme de fonction pure, indépendamment de tout composant :
+
+```ts fileName="locale-resolution.test.ts"
+it("privilégie l'URL par rapport à la préférence enregistrée", () => {
+  expect(resolveLocale({ url: "/fr/about", stored: "de", header: "ja" })).toBe(
+    "fr"
+  );
+});
+
+it("utilise l'en-tête lorsque l'URL ne comporte pas de préfixe", () => {
+  expect(resolveLocale({ url: "/about", stored: null, header: "ja" })).toBe(
+    "ja"
+  );
+});
+```
+
+C'est le test d'internationalisation ayant la plus forte valeur ajoutée qui manque dans la plupart des projets, et il ne requiert aucun DOM.
+
+## Que lancer et à quel moment
+
+- **Unitaire** : négociation de locale, formateurs, catégories de pluriels. Rapide, sans DOM.
+- **Composant** : un rendu avec provider par locale, validant les rôles et l'absence de clés brutes.
+- **Couverture** : un test orienté données garantissant l'absence de clés manquantes sur les locales requises.
+- **Visuel ou end-to-end** : passage en pseudolocalisation et une page RTL, car ces défauts sont purement visuels.
+
+Conservez les trois premiers dans la CI à chaque commit. Le dernier reste idéal lors d'exécutions nocturnes, étant plus coûteux à chaque push.
+
+## Erreurs courantes
+
+- **Valider le texte exact partout.** Condamne la suite de tests à l'abandon d'ici quelques mois.
+- **Prendre des snapshots de composants localisés.** Les traducteurs cassent le build et les relecteurs valident à l'aveugle.
+- **Tester uniquement la locale par défaut.** La seule locale qui ne peut jamais manquer.
+- **Tester uniquement 1 et 2 pour les pluriels.** Ignore toutes les catégories absentes de l'anglais.
+- **Mocker la bibliothèque i18n.** Vous testez alors uniquement que votre mock renvoie des chaînes.
+- **Omettre de tester la négociation.** L'erreur la plus fréquente en production, pourtant la plus simple à vérifier.
+
+## Pour aller plus loin
+
+- [Tester votre contenu : audit CLI, API programmatique et assertions UI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/testing.md)
+- [Plugin ESLint : détecter les chaînes en dur et le contenu inutilisé](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/eslint.md)
+- [Formateurs et utilitaires de locale, dont `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/formatters.md)
+- [Rapports de benchmark à travers différents frameworks](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/benchmark/index.md)
+- [Adaptateur de compatibilité react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/react-i18next.md)
+- [Comment détecter les traductions manquantes](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/detecting_missing_translations.md)
+- [Format de message ICU : pluriels, select et formats squelettes](https://github.com/aymericzip/intlayer/blob/main/docs/blog/fr/icu_message_format.md)

package/blog/fr/intlayer_with_i18next.md

@@ -78,15 +78,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/intlayer_with_next-i18next.md

@@ -67,15 +67,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/intlayer_with_next-intl.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/intlayer_with_react-i18next.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/intlayer_with_react-intl.md

@@ -66,15 +66,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/intlayer_with_vue-i18n.md

@@ -68,15 +68,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.

package/blog/fr/is_i18next_outdated.md

@@ -0,0 +1,315 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: i18next est-il obsolète en 2026 ?
+description: i18next propulse des millions de sites web, mais son architecture runtime de 2011 accuse son âge. Analyse du surpoids des bundles, des limites de tree-shaking et du manque d'innovations.
+keywords:
+  - i18next
+  - react-i18next
+  - next-i18next
+  - Intlayer
+  - Internationalisation
+  - i18n
+  - Taille de bundle
+  - Blog
+slugs:
+  - blog
+  - is-i18next-outdated
+author: aymericzip
+---
+
+# i18next est-il obsolète en 2026 ?
+
+Lancé en 2011, bien avant l'avènement des composants React, du bundling Webpack ou de TypeScript, `i18next` s'est imposé grâce à sa flexibilité et son omniprésence. Il bénéficie d'une réponse sur StackOverflow pour presque chaque question et d'adaptateurs pour tous les frameworks.
+
+Le projet n'est pas abandonné, des correctifs sont publiés de temps en temps. Cependant, maintenir un moteur ancien en état de marche diffère fondamentalement d'une évolution adaptée aux architectures frontend actuelles.
+
+Ces dernières années, le frontend s'est orienté vers la compilation au build, les React Server Components (RSC), le tree-shaking agressif et les outils pilotés par l'IA. De son côté, le cœur d'i18next reste inchangé : un singleton runtime qui résout des clés textuelles côté client.
+
+<TOC/>
+
+## Points clés
+
+**Mode maintenance :**
+
+Au cours de l'année écoulée, `next-i18next` a enregistré environ 63 commits (près d'un par semaine) et `react-i18next` environ 157, principalement pour des montées de versions et des correctifs mineurs.
+
+**Poids runtime élevé :**
+
+`react-i18next` et `next-i18next` injectent environ 17 à 18 Ko gzippés (~60 Ko minifiés) avant même d'afficher le premier mot traduit, soit presque 4 fois plus que `next-intlayer` (~4.7 Ko).
+
+**Fuite importante de traductions :**
+
+Avec la configuration statique par défaut, jusqu'à **89.8%** des données de traduction envoyées sur une page appartiennent en réalité à d'autres pages ou à des langues inutilisées.
+
+**Tree-shaking impossible :**
+
+Les clés dynamiques comme `t("home.hero.title")` ne peuvent pas être analysées par les bundlers, forçant l'inclusion intégrale des fichiers JSON dans le bundle client.
+
+**Alignement commercial :**
+
+Les mainteneurs exploitent Locize. Intégrer un pipeline de traduction par IA local et sans surcoût au sein de la CLI entrerait en concurrence directe avec leur service commercial payant.
+
+## Maintenance ou évolution active
+
+Le nombre d'étoiles GitHub reflète une adoption historique plutôt qu'une dynamique technique moderne.
+
+| Répertoire              | Étoiles                                                                                                                                                    | Commits totaux                                                                                                                                                          | Commits / an                                                                                                                                                           | Dernier commit                                                                                                                                   |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `i18next/i18next`       | [![stars](https://img.shields.io/github/stars/i18next/i18next?style=for-the-badge&label=stars)](https://github.com/i18next/i18next/stargazers)             | [![commits](https://img.shields.io/github/commit-activity/t/i18next/i18next?style=for-the-badge&label=commits)](https://github.com/i18next/i18next/commits)             | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/i18next/commits)             | [![last](https://img.shields.io/github/last-commit/i18next/i18next?style=for-the-badge)](https://github.com/i18next/i18next/commits)             |
+| `i18next/react-i18next` | [![stars](https://img.shields.io/github/stars/i18next/react-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/react-i18next/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/i18next/react-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/react-i18next/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/react-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/react-i18next/commits) | [![last](https://img.shields.io/github/last-commit/i18next/react-i18next?style=for-the-badge)](https://github.com/i18next/react-i18next/commits) |
+| `i18next/next-i18next`  | [![stars](https://img.shields.io/github/stars/i18next/next-i18next?style=for-the-badge&label=stars)](https://github.com/i18next/next-i18next/stargazers)   | [![commits](https://img.shields.io/github/commit-activity/t/i18next/next-i18next?style=for-the-badge&label=commits)](https://github.com/i18next/next-i18next/commits)   | [![yearly](https://img.shields.io/github/commit-activity/y/i18next/next-i18next?style=for-the-badge&label=%2Fyear)](https://github.com/i18next/next-i18next/commits)   | [![last](https://img.shields.io/github/last-commit/i18next/next-i18next?style=for-the-badge)](https://github.com/i18next/next-i18next/commits)   |
+| `aymericzip/intlayer`   | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers)     | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits)     | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits)     | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits)     |
+
+Activité sur les douze derniers mois :
+
+| Projet          | Commits totaux | 12 derniers mois | Priorités                               |
+| --------------- | -------------- | ---------------- | --------------------------------------- |
+| `next-i18next`  | 1 311          | **63**           | Mises à jour Next.js et correctifs      |
+| `react-i18next` | 1 988          | **157**          | Types et maintenance                    |
+| `i18next` core  | 2 626          | **259**          | Correctifs mineurs                      |
+| Intlayer        | 7 156          | **4 343**        | Compilateur, tooling IDE et moteur d'IA |
+
+[![Star History Chart](https://api.star-history.com/chart?repos=i18next%2Fi18next%2Ci18next%2Freact-i18next%2Ci18next%2Fnext-i18next%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#i18next/i18next&i18next/react-i18next&i18next/next-i18next&aymericzip/intlayer)
+
+Une bibliothèque concise peut être mature et stable. Mais les outils d'i18n évoluent vite : les bundlers modernes éliminent le contenu inutile au build, les LLMs traduisent automatiquement en CI, et les éditeurs reposent sur des serveurs de langage (LSP) et des agents IA. L'architecture runtime d'i18next limite sa capacité à adopter ces nouveautés.
+
+## Évaluation de l'impact sur le bundle
+
+<I18nBenchmark framework="tanstack" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-tanstack.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Mesures effectuées sur un build de production avec 10 routes et 10 locales, compression gzip activée. Détails dans le [rapport de benchmark i18n](https://intlayer.org/fr/doc/benchmark).
+
+### Poids initial des bibliothèques
+
+Poids de base avant l'ajout du moindre contenu traduit :
+
+| Bibliothèque           | Gzippé     | Minifié     |
+| ---------------------- | ---------- | ----------- |
+| `next-i18next@16.0.5`  | 17.8 Ko    | 61.2 Ko     |
+| `react-i18next@17.0.2` | 17.3 Ko    | 59.8 Ko     |
+| `intlayer@8.7.12`      | **4.7 Ko** | **12.8 Ko** |
+
+### Poids des pages et fuite de contenu
+
+Testé sous React / TanStack Start (stratégie statique) :
+
+| Bibliothèque          | JS moyen / page (gz) | Fuite de langues | Fuite autres pages | Composant moyen (gz) | Hydratation |
+| --------------------- | -------------------- | ---------------- | ------------------ | -------------------- | ----------- |
+| `react-i18next`       | 180.3 Ko             | **50.0%**        | **89.8%**          | 24.3 Ko              | 85.1 ms     |
+| Intlayer              | **127.8 Ko**         | 50.0%            | **0.8%**           | **7.1 Ko**           | **24.1 ms** |
+| Intlayer (scoped dyn) | **118.1 Ko**         | **0.0%**         | **0.8%**           | **4.6 Ko**           | 23.7 ms     |
+
+Sur Next.js :
+
+| Bibliothèque     | JS moyen / page (gz) | Fuite autres pages | Composant moyen (gz) |
+| ---------------- | -------------------- | ------------------ | -------------------- |
+| Base (sans i18n) | 150.8 Ko             | 0.0%               | 0.7 Ko               |
+| `next-i18next`   | **227.5 Ko**         | **89.8%**          | 24.5 Ko              |
+| `next-intlayer`  | **152.1 Ko**         | **0.0%**           | **7.2 Ko**           |
+
+### Constats majeurs
+
+**Poids des pages :**
+
+Sur Next.js, `next-i18next` ajoute **76.7 Ko gzippés** par rapport au projet de base (+50%). `next-intlayer` n'ajoute que 1.3 Ko.
+
+**Fuites de contenu :**
+
+Par défaut, près de **90% des traductions envoyées** sur une page concernent d'autres sections du site. La séparation manuelle par namespaces est fastidieuse et source d'erreurs.
+
+**Temps d'hydratation :**
+
+L'hydratation des composants prend **85 ms** avec `react-i18next` contre **24 ms** avec Intlayer. Transmettre de volumineux arbres JSON aux composants ralentit la réactivité.
+
+## Pourquoi i18next est-il lourd ?
+
+### Accumulation de fonctionnalités au runtime
+
+Fonctionner intégralement dans le navigateur oblige à charger l'ensemble des modules dès le départ : interpolation, règles de pluriels, gestion de contextes, formats et bus d'événements. Même une simple chaîne de texte embarque tout le moteur.
+
+### Les clés dynamiques bloquent le tree-shaking
+
+Puisque la clé `"hero.title"` est résolue au runtime, les bundlers ne peuvent pas vérifier quelles chaînes sont réellement utilisées. Les textes inutilisés restent donc inclus dans les bundles clients.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```tsx fileName="Component.tsx"
+const { t } = useTranslation("home");
+
+return <h1>{t("hero.title")}</h1>;
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```tsx fileName="Hero.tsx"
+const { title } = useIntlayer("hero");
+
+return <h1>{title}</h1>;
+```
+
+  </Tab>
+</Tabs>
+
+Le [compilateur Intlayer](https://intlayer.org/fr/doc/compiler) identifie ce que `Hero.tsx` utilise réellement et élimine les champs non référencés avant de produire les bundles clients. Consultez [l'optimisation de bundle](https://intlayer.org/fr/doc/concept/bundle-optimization) pour en savoir plus.
+
+## Expérience développeur
+
+### Fichiers JSON distants ou co-localisation
+
+Avec i18next, les traductions sont dispersées dans des dossiers JSON séparés du code. Intlayer regroupe les déclarations de contenu directement à côté des composants.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="i18next" value="i18next">
+
+```json fileName="locales/en/hero.json"
+{
+  "title": "Ship in every language"
+}
+```
+
+```json fileName="locales/fr/hero.json"
+{
+  "title": "Livrez dans toutes les langues"
+}
+```
+
+```tsx fileName="Hero.tsx"
+import { useTranslation } from "react-i18next";
+
+export const Hero = () => {
+  const { t } = useTranslation("hero");
+  return <h1>{t("title")}</h1>;
+};
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero",
+  content: {
+    title: t({
+      en: "Ship in every language",
+      fr: "Livrez dans toutes les langues",
+    }),
+  },
+} satisfies Dictionary;
+```
+
+```tsx fileName="Hero.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export const Hero = () => {
+  const { title } = useIntlayer("hero");
+  return <h1>{title}</h1>;
+};
+```
+
+  </Tab>
+</Tabs>
+
+Lorsque vous déplacez ou supprimez `Hero.tsx`, ses traductions suivent automatiquement.
+
+### Autocomplétion ou sécurité de typage stricte
+
+L'extension de `CustomTypeOptions` offre l'autocomplétion des clés, mais ne garantit pas la présence effective des textes. La suppression d'une clé dans `fr/home.json` ne bloque pas votre build, elle entraîne simplement un fallback au runtime.
+
+Intlayer déduit les types à partir des déclarations de contenu, et le [`strictMode`](https://intlayer.org/fr/doc/concept/configuration) convertit les traductions manquantes en erreurs strictes au build.
+
+### Comparatif d'outillage
+
+| Fonctionnalité                  | Écosystème i18next   | Intlayer                                                                     |
+| ------------------------------- | -------------------- | ---------------------------------------------------------------------------- |
+| **Extension VS Code**           | Tierce uniquement    | ✅ [Extension officielle](https://intlayer.org/fr/doc/vs-code-extension)     |
+| **Serveur de langage (LSP)**    | ❌ Aucun             | ✅ [LSP dédié](https://intlayer.org/fr/doc/lsp)                              |
+| **Serveur MCP (pour IA)**       | ❌ Aucun             | ✅ [Serveur MCP intégré](https://intlayer.org/fr/doc/mcp-server)             |
+| **Compétences agents (Skills)** | ❌ Aucune            | ✅ [Compétences prêtes à l'emploi](https://intlayer.org/fr/doc/agent_skills) |
+| **CMS visuel en contexte**      | Locize (SaaS payant) | ✅ [Gratuit et open source](https://intlayer.org/fr/doc/concept/editor)      |
+
+## Traduction et modèle économique de Locize
+
+Locize est la plateforme commerciale officielle créée par les auteurs d'i18next. Bien que le financement de l'open source soit essentiel, ce modèle engendre un arbitrage : un projet monétisé via un SaaS de traduction a peu d'intérêt à fournir gratuitement un outil de traduction IA local et autonome dans sa CLI.
+
+Intlayer privilégie un modèle ouvert :
+
+- [`intlayer fill`](https://intlayer.org/fr/doc/concept/auto-fill) complète les traductions manquantes en local ou en CI avec vos propres clés API (OpenAI, Anthropic, Mistral, Gemini).
+- Le [CMS Intlayer](https://intlayer.org/fr/doc/concept/cms) est open source et auto-hébergeable via Docker Compose.
+- Le compilateur, la CLI, l'éditeur et le CMS sont tous sous licence Apache 2.0.
+
+## Dans quels cas i18next reste-t-il pertinent ?
+
+<AccordionGroup>
+<Accordion header="Bases de code existantes et stables">
+
+Si votre application fonctionne sans difficulté et que la taille du bundle n'est pas critique, une réécriture n'est pas nécessaire.
+
+</Accordion>
+<Accordion header="Plateformes spécifiques">
+
+Le catalogue d'extensions d'i18next couvre des configurations particulières (Electron, anciennes applications jQuery, bridges natifs sur mesure) que les compilateurs récents ne ciblent pas forcément.
+
+</Accordion>
+<Accordion header="Base de connaissances communautaire">
+
+L'historique accumulé sur StackOverflow et GitHub facilite la résolution de cas rares.
+
+</Accordion>
+</AccordionGroup>
+
+## Comment améliorer ma configuration i18next existante ?
+
+Intlayer propose des packages de compatibilité prêts à l'emploi qui reprennent à l'identique les signatures de fonctions des bibliothèques i18next (`i18next`, `react-i18next` et `next-i18next`). Vous n'avez pas besoin de réécrire vos composants pour bénéficier d'une architecture optimisée par compilateur.
+
+L'installation s'effectue en une seule commande :
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer init --interactive
+```
+
+Cette CLI interactive :
+
+1. Installe le package de compatibilité `@intlayer/i18next`.
+2. Configure les alias du bundler afin que vos imports habituels (`useTranslation`, `Trans`, `t`) pointent directement vers Intlayer, permettant de retirer l'ancienne bibliothèque de votre `package.json`.
+3. Active immédiatement le support du serveur de langage (LSP) dans l'IDE, l'optimisation du bundle (tree-shaking complet) et les flux de traduction IA locale.
+
+Pour aller plus loin, consultez nos guides détaillés :
+
+- **Couches de compatibilité :** Conservez votre code existant avec les adaptateurs pour [i18next](https://intlayer.org/fr/doc/compatibility/i18next), [react-i18next](https://intlayer.org/fr/doc/compatibility/react-i18next) et [next-i18next](https://intlayer.org/fr/doc/compatibility/next-i18next).
+- **Migration des dictionnaires :** Convertissez vos catalogues JSON en structures typées : [depuis i18next](https://intlayer.org/fr/doc/migration/i18next), [depuis react-i18next](https://intlayer.org/fr/doc/migration/react-i18next) ou [depuis next-i18next](https://intlayer.org/fr/doc/migration/next-i18next).
+- **Approche hybride :** Gardez votre runtime i18next tout en [associant Intlayer à i18next](https://intlayer.org/fr/blog/intlayer-with-i18next) pour générer, typer et traduire automatiquement vos dictionnaires.
+
+Analysez votre site en production avec le [scanner SEO i18n gratuit](https://intlayer.org/i18n-seo-scanner) :
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Lectures recommandées
+
+- [Benchmark i18n Next.js : analyse complète des performances](https://intlayer.org/fr/doc/benchmark/nextjs)
+- [react-i18next vs react-intl vs Intlayer](https://intlayer.org/fr/blog/react-i18next-vs-react-intl-vs-intlayer)
+- [next-intl est-il obsolète en 2026 ?](https://intlayer.org/fr/blog/is-next-intl-outdated)
+- [Architecture de compilation vs i18n déclarative](https://intlayer.org/fr/blog/compiler-vs-declarative-i18n)