--- createdAt: 2026-06-14 updatedAt: 2026-06-14 title: Nouvel Intlayer v9 - Quoi de neuf ? description: Découvrez les nouveautés d'Intlayer v9. Présentation des packages de compatibilité prêts à l'emploi pour les bibliothèques i18n populaires et prise en charge des Collections, Variants et Dynamic Records. keywords: - Intlayer - Compatibility - Migration - Collections - Variants - Dynamic Records - i18next - next-intl - vue-i18n slugs: - doc - releases - v9 author: aymericzip --- # Nouvel Intlayer v9 - Quoi de neuf ? Bienvenue sur Intlayer v9 ! Cette version majeure marque une étape importante dans la simplification du chemin de migration vers Intlayer avec les **packages d'adaptateurs de compatibilité** pour les principales bibliothèques i18n (`react-i18next`, `next-intl`, `vue-i18n`, etc.) et ajoute la prise en charge de structures de contenu riches : les **Collections**, les **Variants** et les **Dynamic Records**. ## Table des matières --- ## Packages d'adaptateurs de compatibilité La migration vers Intlayer depuis les bibliothèques i18n populaires est désormais plus facile que jamais. Nous avons créé cinq packages de compatibilité qui exposent les **mêmes API publiques exactes** que les bibliothèques i18n standard, mais délèguent tout le travail de traduction à Intlayer au moment de l'exécution. ### Exposer la même API publique avec un typage strict En remplaçant les imports, vous bénéficiez de tous les avantages d'Intlayer (y compris la sécurité de type au moment de la compilation par rapport à vos dictionnaires réels) avec des modifications de code minimales : - `@intlayer/i18next` - `@intlayer/react-i18next` - `@intlayer/next-intl` - `@intlayer/next-i18next` - `@intlayer/vue-i18n` Par exemple, changez simplement : ```ts import { useTranslation } from "react-i18next"; ``` en : ```ts import { useTranslation } from "@intlayer/react-i18next"; ``` Vos clés seront désormais **strictement typées** par rapport à vos dictionnaires Intlayer, offrant une auto-complétion complète des chemins par points dans votre IDE ! ### Plugins d'alias de Bundler (Vite, Next.js, Turbopack) Pour permettre la migration sans réécrire manuellement toutes vos déclarations d'import, chaque package d'adaptateur de compatibilité inclut un **plugin de bundler personnalisé** (Vite ou Next.js) sous le sous-chemin `/plugin`. Ces plugins réécrivent automatiquement les imports existants (par exemple `react-i18next` ou `next-intl`) vers leurs équivalents `@intlayer/*` au moment de la compilation. #### Exemple Next.js (Webpack / Turbopack) Au lieu de `withIntlayer`, enveloppez votre configuration Next.js avec le plugin de compatibilité : ```ts fileName="next.config.ts" import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin"; import type { NextConfig } from "next"; const withIntlayer = createNextI18nPlugin(); const nextConfig: NextConfig = {}; export default withIntlayer(nextConfig); ``` #### Exemple Vite (React, Vue, Solid, Svelte) ```ts fileName="vite.config.ts" import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin"; export default defineConfig({ plugins: [vueI18nVitePlugin()], }); ``` --- ## Résolveur d'exécution mutualisé Tous les adaptateurs de compatibilité acheminent désormais la résolution des traductions via un seul analyseur d'exécution hautement optimisé : `@intlayer/core/messageFormat`. - **Interpoler le message** : Résout les `{{var}}` standard (espaces et chemins par points), les arguments formatés ICU (`{v, number, percent}` etc.) et les templates `{var}` bruts. - **Résolveur de nœuds de message** : Résout les nœuds imbriqués : `insert()`, `plural()` (règles de pluriel CLDR), `enu()` (énumération), `gender()`, les balises HTML, les tableaux et les nœuds de fonction appelables. - **Analyseur de balises tokenisées** : Prend en charge les balises XML/HTML en ligne et les balises numérotées (par exemple, `<1>children`) pour permettre le rendu de texte riche dès la première utilisation. --- ## Spécification des fonctionnalités : Collections, Variants & Dynamic Records Intlayer v9 va au-delà des objets clé-valeur statiques, permettant aux dictionnaires de déclarer des structures de mise en page dynamiques entièrement typées de bout en bout. ### 1. Collections Définissez une liste d'éléments ordonnés gérée par un CMS (par exemple, FAQ, produits ou listes de blogs) : ```ts fileName="faq.content.ts" import { t, type Dictionary } from "intlayer"; export default { key: "faq", content: [ { question: t({ fr: "Qu'est-ce qu'Intlayer ?", en: "What is Intlayer?" }), answer: t({ fr: "Une boîte à outils i18n.", en: "An i18n toolkit." }), }, ], } satisfies Dictionary; ``` #### Utilisation : ```ts // Récupérer tous les éléments const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[] // Récupérer un seul élément par index const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string } ``` ### 2. Variants Proposez des tests A/B, des en-têtes saisonniers, des feature flags ou des pages de destination personnalisées : ```ts fileName="hero.content.ts" import { t, type Dictionary } from "intlayer"; export default { key: "hero-banner", variant: "default", content: { control: t({ fr: "Bienvenue", en: "Welcome" }), black_friday: t({ fr: "Acheter maintenant", en: "Shop now" }), }, } satisfies Dictionary; ``` #### Utilisation : ```ts const banner = useIntlayer("hero-banner", { variant: "black_friday" }); ``` ### 3. Dynamic Records Définissez des dictionnaires dont les entrées sont chargées dynamiquement au moment de l'exécution via des ID de requête : ```ts fileName="product.content.ts" import { t, type Dictionary } from "intlayer"; export default { key: "product-copy", meta: { id: "prod_123", category: "books", }, content: { title: t({ fr: "Code Propre", en: "Clean Code" }), }, } satisfies Dictionary; ``` #### Utilisation : ```ts // Récupère uniquement l'élément demandé dynamiquement (nécessite Suspense) const product = useIntlayer("product-copy", { id: "prod_123", category: "books", }); ``` --- ## Chargement dynamique et optimisations de la taille du bundle Pour maintenir les bundles extrêmement petits, Intlayer v9 prend en charge le chargement paresseux dynamique. Dans votre configuration, définissez `importMode` sur `'dynamic'` ou `'fetch'` : ```ts fileName="intlayer.config.ts" export default { dictionary: { importMode: "dynamic", // "static" | "dynamic" | "fetch" }, }; ``` Au moment de la compilation, `@intlayer/swc` et `@intlayer/babel` analysent vos fichiers et remplacent les appels `useIntlayer` / `getIntlayer` par des wrappers optimisés par tree-shaking (`useDictionary` / `useDictionaryDynamic`). Seul le contenu requis pour l'élément de collection, le variant ou la locale sélectionné est chargé, empêchant ainsi votre bundle de production de contenir des traductions inutilisées. --- ## Notes de migration depuis la v8 Si vous effectuez une mise à niveau depuis la v8, notez que la v9 n'inclut pas de changements majeurs (breaking changes). Voici cependant les changements clés : - **Locales et dialectes** : Si vous utilisez des dépendances i18n externes, ajoutez leurs plugins d'adaptateur de compatibilité respectifs dans votre configuration ou votre setup de bundler pour réécrire automatiquement les imports. - **Sélecteurs personnalisés** : Lors de l'appel de `useIntlayer`, le deuxième paramètre est désormais réservé à un objet d'options contenant `{ locale, item, variant, id }`. Si vous passiez auparavant une chaîne de caractères de locale directement, vous pouvez toujours le faire, mais l'utilisation de l'objet d'options est recommandée pour les sélections avancées. --- ## Liens utiles - [Guide des packages d'adaptateurs de compatibilité](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/index.md) - [Dictionnaires dynamiques - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md) - [Référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md)