@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.10

package/docs/fr/intlayer_with_react_native+expo.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-06-18
-updatedAt: 2026-05-31
+updatedAt: 2026-06-25
 title: "Expo + React Native i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Expo + React Native multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -17,12 +17,18 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-react-native-template
 applicationShowcase: https://intlayer-react-native.vercel.app
 history:
+  - version: 9.0.0
+    date: 2026-06-25
+    changes: "Importer les providers et les hooks directement depuis react-native-intlayer ; react-intlayer n'est plus nécessaire en tant que dépendance directe"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Mettre à jour l'utilisation de l'API useIntlayer de Solid pour un accès direct aux propriétés"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Ajouter la commande init"
+  - version: 6.1.6
+    date: 2025-10-02
+    changes: "Ajouter la section de débogage"
   - version: 5.5.10
     date: 2025-06-29
     changes: "Historique initial"
@@ -37,7 +43,7 @@ author: aymericzip
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-react-native-template?file=intlayer.config.ts"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Intlayer"
+  title="Demo CodeSandbox - Comment internationaliser votre application avec Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -56,11 +62,13 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-react-native-template) sur GitHub.
+## Table des matières
+
+<TOC/>
 
 ## Pourquoi Intlayer plutôt que des alternatives ?
 
-Par rapport aux solutions principales telles que `react-native-localize` ou `i18next`, Intlayer est une solution qui comprend des optimisations intégrées telles que :
+Par rapport aux solutions principales telles que `react-native-localize` ou `i18next`, Intlayer est une solution qui comprend des optimisations intégrées telles que :
 
 <AccordionGroup>
 
@@ -78,13 +86,13 @@ Déclarer le contenu directement au plus près de vos composants **facilite la m
 
 <Accordion header="Prêt pour les agents IA">
 
-La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
+La colocalisation du contenu **réduit le contexte nécessaire** aux grands modèles de langage (LLM). Intlayer est également livré avec une suite d'outils, tels qu'une **CLI** pour vérifier les traductions manquantes, un **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, un **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** et des **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, afin de rendre l'expérience développeur (DX) encore plus fluide pour les agents IA.
 
 </Accordion>
 
 <Accordion header="Automatisation">
 
-Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
+Automatisez les traductions dans votre pipeline CI/CD en utilisant le LLM de votre choix au coût de votre propre fournisseur d'IA. Intlayer propose également un **compilateur** pour automatiser l'extraction de contenu, ainsi qu'une [plateforme web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) pour vous aider à **traduire en arrière-plan**.
 
 </Accordion>
 
@@ -96,7 +104,7 @@ Associer de gros fichiers JSON à vos composants peut ralentir les performances
 
 <Accordion header="Collaboration avec les non-développeurs">
 
-Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
+Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** auto-hébergé et un **[CMS complet](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** pour gérer votre contenu multilingue en **temps réel**. Cela rend la collaboration avec les traducteurs, concepteurs-rédacteurs et autres membres de l'équipe extrêmement simple. Le contenu peut être stocké localement et/ou à distance.
 
 </Accordion>
 
@@ -113,66 +121,42 @@ Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le con
 
 Voir [Modèle d'application](https://github.com/aymericzip/intlayer-react-native-template) sur GitHub.
 
-Depuis votre projet React Native, installez les packages suivants :
+Depuis votre projet React Native, installez les packages suivants :
 
 ```bash packageManager="npm"
-npm installer la couche interne réagir-la couche interne
-npm install --save-dev réagir-native-intlayer
-initialisation de la couche interne npx
+npx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm ajouter une couche interne de réaction
-pnpm add --save-dev réagir-native-intlayer
-initialisation de la couche interne pnpm
+pnpm dlx intlayer-cli init --interactive
 ```
 
-```bash packageManager="fil"
-fil ajouter une couche interne réagir-une couche interne
-fil ajouter --save-dev réagir-native-intlayer
-initialisation de la couche interne de fil
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
 ```
 
 ```bash packageManager="bun"
-chignon ajouter une couche interne réagir-une couche interne
-chignon ajouter --dev réagir-native-intlayer
-bun x initialisation de la couche interne
+bunx intlayer-cli init --interactive
 ```
 
-### Forfaits
-
-- **intercalaire**  
-  La boîte à outils de base i18n pour la configuration, le contenu du dictionnaire, la génération de types et les commandes CLI.
+> Le flag `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
 
-- **réagir-intercalaire**  
-  Intégration React qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez dans React Native pour obtenir et changer de langue.
-
-- **react-native-intlayer**  
-  Intégration React Native qui fournit le plugin Metro pour intégrer Intlayer au bundle React Native.
-
----
-
-</Step>
-
-<Step number={2} title="Installer les dépendances">
-
-Depuis votre projet React Native, installez les packages suivants :
+> Cette commande détectera votre environnement et installera les packages requis. Par exemple :
 
 ```bash packageManager="npm"
-bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install --save-dev react-native-intlayer
+npm install intlayer react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add --save-dev react-native-intlayer
-pnpm intlayer init
+pnpm add intlayer react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add --save-dev react-native-intlayer
+yarn add intlayer react-native-intlayer
+```
+
+```bash packageManager="bun"
+bun add intlayer react-native-intlayer
 ```
 
 ### Packages
@@ -180,17 +164,14 @@ yarn add --save-dev react-native-intlayer
 - **intlayer**  
   La boîte à outils i18n principale pour la configuration, le contenu des dictionnaires, la génération de types et les commandes CLI.
 
-- **react-intlayer**  
-  Intégration React qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez dans React Native pour obtenir et changer les locales.
-
 - **react-native-intlayer**  
-  Intégration React Native qui fournit le plugin Metro pour intégrer Intlayer avec le bundler React Native.
+  Intégration React Native qui fournit les fournisseurs de contexte et les hooks React que vous utiliserez pour obtenir et changer les locales, les polyfills React Native et le plugin Metro pour intégrer Intlayer avec le bundler React Native. Il ré-exporte tout depuis `react-intlayer`, vous n'avez donc besoin que de ce seul package dans une application React Native.
 
 ---
 
 </Step>
 
-<Step number={3} title="Créer une configuration Intlayer">
+<Step number={2} title="Créer une configuration Intlayer">
 
 Dans la racine de votre projet (ou à tout autre endroit pratique), créez un fichier de **configuration Intlayer**. Il pourrait ressembler à ceci :
 
@@ -220,11 +201,11 @@ Dans cette configuration, vous pouvez :
 - Configurer votre **liste de locales prises en charge**.
 - Définir une locale **par défaut**.
 - Plus tard, vous pourrez ajouter des options plus avancées (par exemple, des logs, des répertoires de contenu personnalisés, etc.).
-- Consultez la [documentation de configuration d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md) pour plus d'informations.
+- Consultez la [documentation de configuration d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) pour plus d'informations.
 
 </Step>
 
-<Step number={4} title="Ajouter le plugin Metro">
+<Step number={3} title="Ajouter le plugin Metro">
 
 Metro est un bundler pour React Native. C'est le bundler par défaut pour les projets React Native créés avec la commande `react-native init`. Pour utiliser Intlayer avec Metro, vous devez ajouter le plugin dans votre fichier `metro.config.js` :
 
@@ -239,13 +220,18 @@ module.exports = (async () => {
 })();
 ```
 
+> Note : `configMetroIntlayer` est une fonction asynchrone. Utilisez `configMetroIntlayerSync` à la place si vous souhaitez l'utiliser de manière synchrone, ou éviter une IIFE (Immediately Invoked Function Expression).
+> Note : `configMetroIntlayerSync` ne permet pas de construire les dictionnaires intlayer au démarrage du serveur
+
 </Step>
 
-<Step number={5} title="Ajouter le fournisseur Intlayer">
+<Step number={4} title="Ajouter le fournisseur Intlayer">
+
+Pour garder synchronisée la langue de l'utilisateur dans toute votre application, vous devez envelopper votre composant racine avec le composant `IntlayerProvider` de `react-native-intlayer`.
 
-Pour garder synchronisée la langue de l'utilisateur dans toute votre application, vous devez envelopper votre composant racine avec le composant `IntlayerProvider` de `react-intlayer-native`.
+> Importez toujours depuis `react-native-intlayer`. Son `IntlayerProvider` inclut des polyfills pour l'API web utilisée par Intlayer, et le package ré-exporte tous les hooks et utilitaires de `react-intlayer`.
 
-> Assurez-vous d'utiliser le fournisseur de `react-native-intlayer` au lieu de `react-intlayer`. L'export de `react-native-intlayer` inclut des polyfills pour l'API web.
+De plus, vous devez ajouter la fonction `intlayerPolyfill` à votre fichier `index.js` pour vous assurer qu'Intlayer puisse fonctionner correctement.
 
 ```tsx fileName="app/_layout.tsx" codeFormat={["typescript", "esm"]}
 import { Stack } from "expo-router";
@@ -270,11 +256,13 @@ export default RootLayout;
 
 </Step>
 
-<Step number={6} title="Déclarez Votre Contenu">
+<Step number={5} title="Déclarez Votre Contenu">
 
 Créez des fichiers de **déclaration de contenu** n'importe où dans votre projet (généralement dans `src/`), en utilisant l'un des formats d'extension pris en charge par Intlayer :
 
 - `.content.json`
+- `.content.jsonc`
+- `.content.json5`
 - `.content.ts`
 - `.content.tsx`
 - `.content.js`
@@ -282,9 +270,20 @@ Créez des fichiers de **déclaration de contenu** n'importe où dans votre proj
 - `.content.mjs`
 - `.content.mjx`
 - `.content.cjs`
-- `.content.cjx`
+- `.content.md`
+- `.content.mdx`
+- `.content.yaml`
+- `.content.yml`
 - etc.
 
+> **Expo Router (web) : gardez les fichiers `.content.*` en dehors du répertoire `app/`.** Expo Router traite chaque fichier JavaScript/TypeScript dans `app/` comme une route. Sur le web, sa découverte de routes scanne directement le système de fichiers et **ne respecte pas** le `resolver.blockList` de Metro, donc un `*.content.ts` co-localisé est enregistré comme une route. Un fichier tel que `app/(tabs)/_layout.content.ts` est même analysé comme un layout (la partie `.content` est lue comme un suffixe de plateforme), ce qui entre en conflit avec le vrai `_layout.tsx` et renvoie une erreur :
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> Placez vos déclarations dans un répertoire en dehors de `app/` (par exemple `content/` ou `src/content/`). Intlayer découvre les fichiers `.content.*` n'importe où dans le projet et les dictionnaires sont référencés par leur `key`, donc aucune modification d'importation n'est nécessaire. En natif, ce n'est pas requis (le `blockList` de Metro les cache déjà), mais l'utilisation d'un répertoire autre que `app/` permet aux deux plateformes de fonctionner.
+
 Exemple (TypeScript avec des nœuds TSX pour React Native) :
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -327,13 +326,13 @@ export default homeScreenContent;
 }
 ```
 
-> Pour plus de détails sur les déclarations de contenu, consultez la [documentation du contenu d’Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
+> Pour plus de détails sur les déclarations de contenu, consultez la [documentation du contenu d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 ---
 
 </Step>
 
-<Step number={7} title="Utiliser Intlayer dans vos composants">
+<Step number={6} title="Utiliser Intlayer dans vos composants">
 
 Utilisez le hook `useIntlayer` dans les composants enfants pour obtenir du contenu localisé.
 
@@ -341,7 +340,7 @@ Utilisez le hook `useIntlayer` dans les composants enfants pour obtenir du conte
 
 ```tsx fileName="app/(tabs)/index.tsx" codeFormat={["typescript", "esm"]}
 import { Image, StyleSheet, Platform } from "react-native";
-import { useIntlayer } from "intlayer";
+import { useIntlayer } from "react-native-intlayer";
 import { HelloWave } from "@/components/HelloWave";
 import ParallaxScrollView from "@/components/ParallaxScrollView";
 import { ThemedText } from "@/components/ThemedText";
@@ -382,13 +381,13 @@ export default HomeScreen;
 
 > Lors de l'utilisation de `content.someKey` dans des props basées sur des chaînes (par exemple, le `title` d'un bouton ou les `children` d'un composant `Text`), **appelez `content.someKey.value`** pour obtenir la chaîne réelle.
 
-> Si votre application existe déjà, vous pouvez utiliser le [Compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compiler.md), ainsi que la [commande d'extraction](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/extract.md), pour transformer des milliers de composants en une seconde.
+> Si votre application existe déjà, vous pouvez utiliser le [Compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md), ainsi que la [commande d'extraction](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md), pour transformer des milliers de composants en une seconde.
 
 ---
 
 </Step>
 
-<Step number={8} title="Changer la langue de l'application" isOptional={true}>
+<Step number={7} title="Changer la langue de l'application" isOptional={true}>
 
 Pour changer la langue depuis vos composants, vous pouvez utiliser la méthode `setLocale` du hook `useLocale` :
 
@@ -396,7 +395,7 @@ Pour changer la langue depuis vos composants, vous pouvez utiliser la méthode `
 import { type FC } from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { getLocaleName } from "intlayer";
-import { useLocale } from "react-intlayer";
+import { useLocale } from "react-native-intlayer";
 
 export const LocaleSwitcher: FC = () => {
   const { setLocale, availableLocales } = useLocale();
@@ -439,7 +438,7 @@ const styles = StyleSheet.create({
 
 Cela déclenche un nouveau rendu de tous les composants qui utilisent le contenu Intlayer, affichant désormais les traductions pour la nouvelle locale.
 
-> Voir la [documentation de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md) pour plus de détails.
+> Voir la [documentation de `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md) pour plus de détails.
 
 </Step>
 
@@ -498,10 +497,38 @@ Pour plus de détails sur l'utilisation de l'extension, consultez la [documentat
 
 ## Aller plus loin
 
-- **Éditeur Visuel** : Utilisez le [Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) pour gérer les traductions visuellement.
-- **Intégration CMS** : Vous pouvez également externaliser et récupérer le contenu de votre dictionnaire depuis un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
-- **Commandes CLI** : Explorez le [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/index.md) pour des tâches telles que **l'extraction des traductions** ou **la vérification des clés manquantes**.
+- **Éditeur Visuel** : Utilisez le [Éditeur Visuel Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) pour gérer les traductions visuellement.
+- **Intégration CMS** : Vous pouvez également externaliser et récupérer le contenu de votre dictionnaire depuis un [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
+- **Commandes CLI** : Explorez le [CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md) pour des tâches telles que **l'extraction des traductions** ou **la vérification des clés manquantes**.
 
 Profitez de la création de vos applications **React Native** avec une i18n pleinement optimisée grâce à **Intlayer** !
 
 ---
+
+### Débogage
+
+React Native peut être moins stable que React Web, donc faites particulièrement attention à l'alignement des versions.
+
+Intlayer cible principalement l'API Web Intl ; sur React Native, vous devez inclure les polyfills appropriés.
+
+Checklist :
+
+- Utilisez les dernières versions de `intlayer` et `react-native-intlayer`.
+- Activez le polyfill Intlayer.
+- Si vous utilisez `getLocaleName` ou d'autres utilitaires basés sur l'API Intl, importez ces polyfills tôt (par exemple dans `index.js` ou `App.tsx`) :
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
+
+- Vérifiez votre configuration Metro (resolver aliases, asset plugins, chemins `tsconfig`) si les modules ne se résolvent pas.
+
+---

package/docs/fr/intlayer_with_react_router_v7.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application React Router v7 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -106,28 +106,44 @@ Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](h
 
 Installez les paquets nécessaires en utilisant votre gestionnaire de paquets préféré :
 
+```bash packageManager="npm"
+npx intlayer-cli init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer-cli init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer-cli init --interactive
+```
+
+> l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
+
+> Cette commande détectera votre environnement et installera les packages requis. Par exemple :
+
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
 npm install vite-intlayer --save-dev
-npx intlayer init
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer react-intlayer
 pnpm add vite-intlayer --save-dev
-pnpm intlayer init
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer react-intlayer
 yarn add vite-intlayer --save-dev
-yarn intlayer init
 ```
 
 ```bash packageManager="bun"
 bun add intlayer react-intlayer
 bun add vite-intlayer --dev
-bun x intlayer init
 ```
 
 - **intlayer**
@@ -620,6 +636,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
 
 ```ts fileName="vite.config.ts"
@@ -629,7 +647,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Ajoute le plugin du compilateur
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -713,100 +731,6 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 ---
 
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={11} title="Ajouter un middleware">
-
-Vous pouvez également utiliser le `intlayerProxy` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
-
-> Notez que pour utiliser le `intlayerProxy` en production, vous devez déplacer le package `vite-intlayer` de `devDependencies` vers `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## Configurer TypeScript
-
-Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
-
-Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement :
-
-```json5 fileName="tsconfig.json"
-{
-  // ... vos configurations existantes
-  include: [
-    // ... vos inclusions existantes
-    ".intlayer/**/*.ts", // Inclure les types générés automatiquement
-  ],
-}
-```
-
----
-
-## Configuration Git
-
-Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.
-
-Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `.gitignore` :
-
-```plaintext fileName=".gitignore"
-# Ignorer les fichiers générés par Intlayer
-.intlayer
-```
-
----
-
-## Extension VS Code
-
-Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l’**extension officielle Intlayer pour VS Code**.
-
-[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Cette extension offre :
-
-- **L’autocomplétion** pour les clés de traduction.
-- **La détection d’erreurs en temps réel** pour les traductions manquantes.
-- **Des aperçus en ligne** du contenu traduit.
-- **Des actions rapides** pour créer et mettre à jour facilement les traductions.
-
-Pour plus de détails sur l’utilisation de l’extension, consultez la [documentation de l’extension Intlayer pour VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-## Aller plus loin
-
-Pour aller plus loin, vous pouvez implémenter l’[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
-
----
-
 ## Références de la documentation
 
 - [Documentation Intlayer](https://intlayer.org)

package/docs/fr/intlayer_with_react_router_v7_fs_routes.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "React Router v7 i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application React Router v7 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -683,6 +683,8 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilateur Babel'>
 
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
 Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
 
 ```ts fileName="vite.config.ts"
@@ -692,7 +694,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Ajoute le plugin du compilateur
+    intlayerCompiler(), // Adds the compiler plugin
   ],
 });
 ```
@@ -724,105 +726,6 @@ bun run build # Ou bun run dev
 
 ## Configurer TypeScript
 
-Intlayer utilise l'augmentation de module pour tirer parti des avantages de TypeScript et renforcer votre base de code.
-
-![Autocomplétion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Erreur de traduction](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement :
-
-```json5 fileName="tsconfig.json"
-{
-  // ... vos configurations existantes
-  include: [
-    // ... vos configurations existantes
-    ".intlayer/**/*.ts", // Inclure les types générés automatiquement
-  ],
-}
-```
-
----
-
-## Configuration de Git
-
-Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les committer dans votre dépôt Git.
-
-Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `.gitignore` :
-
-```plaintext fileName=".gitignore"
-# Ignorer les fichiers générés par Intlayer
-.intlayer
-```
-
----
-
-## Extension VS Code
-
-Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
-
-[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Cette extension fournit :
-
-- **L'autocomplétion** pour les clés de traduction.
-- **La détection des erreurs en temps réel** pour les traductions manquantes.
-- **Des aperçus en ligne** du contenu traduit.
-- **Des actions rapides** pour faciliter la création et la mise à jour des traductions.
-
-Pour plus de détails sur l'utilisation de l'extension, reportez-vous à la [documentation de l'extension Intlayer pour VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-## Aller plus loin
-
-Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
-
----
-
-## Références de Documentation
-
-- [Documentation Intlayer](https://intlayer.org)
-- [Documentation React Router v7](https://reactrouter.com/)
-- [Documentation React Router fs-routes](https://reactrouter.com/how-to/file-route-conventions)
-- [Hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md)
-- [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md)
-- [Déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md)
-
-Ce guide complet vous fournit tout ce dont vous avez besoin pour intégrer Intlayer avec React Router v7 en utilisant un routage basé sur le système de fichiers pour obtenir une application entièrement internationalisée avec un routage sensible à la locale et une prise en charge de TypeScript.
-
-<Steps>
-
-<Step number={10} title="Ajouter un middleware">
-
-Vous pouvez également utiliser le `intlayerProxy` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la locale actuelle en fonction de l'URL et définira le cookie de locale approprié. Si aucune locale n'est spécifiée, le plugin déterminera la locale la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune locale n'est détectée, il redirigera vers la locale par défaut.
-
-> Notez que pour utiliser le `intlayerProxy` en production, vous devez déplacer le package `vite-intlayer` de `devDependencies` vers `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayerProxy(), // should be placed first
-    reactRouter(),
-
-    intlayer(),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## Configurer TypeScript
-
 Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
 
 Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement :