@intlayer/docs 9.4.4 → 9.5.0

package/docs/fr/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-08-29
+updatedAt: 2026-09-08
 title: "Next.js 16 i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application Next.js 16 multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -41,7 +41,7 @@ author: aymericzip
 <iframe title="La meilleure solution i18n pour Next.js ? Découvrez Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/e_PPG7PTqGU?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
-  <Tab label="Code" value="code">
+  <Tab label="Code (chemins de locale)" value="code-locale-path">
 
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-next-16-template?file=intlayer.config.ts"
@@ -52,12 +52,23 @@ author: aymericzip
 />
 
   </Tab>
-  <Tab label="Démo" value="demo">
+  <Tab label="Code (sans chemin de locale)" value="code-no-locale-path">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-next-16-no-locale-path-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="Démo CodeSandbox - Comment internationaliser votre application avec Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Démo (chemins de locale)" value="demo">
 
 <iframe
   src="https://intlayer-next-16-template.vercel.app"
   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="Démo - intlayer-next-16-template"
+  title="Démo Intlayer Next.js 16 Template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -65,7 +76,7 @@ author: aymericzip
   </Tab>
 </Tabs>
 
-Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-next-16-template) sur GitHub.
+Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-next-16-template) et le [Modèle d'Application sans chemin de locale](https://github.com/aymericzip/intlayer-next-no-lolale-path-template) sur GitHub.
 
 ## Table des matières
 
@@ -81,41 +92,35 @@ Par rapport aux solutions principales telles que `next-intl` ou `i18next`, Intla
 Intlayer est optimisé pour fonctionner avec les **composants serveur** pour un rendu efficace et est entièrement compatible avec [**Turbopack**](https://nextjs.org/docs/architecture/turbopack). Il ne bloque pas le rendu statique et propose un middleware ainsi que toutes les fonctionnalités nécessaires à l'internationalisation à l'échelle (i18n).
 
 > Intlayer est compatible avec Next.js 12, 13, 14, 15 et 16. Si vous utilisez le routeur de pages Next.js, vous pouvez vous référer à ce [guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_page_router.md).
-> Le routage local est utile pour le référencement, la taille du bundle et les performances. Si vous n'en avez pas besoin, vous pouvez vous référer à ce [guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_no_locale_path.md).
+> Le routage par locale est utile pour le référencement, la taille du bundle et les performances. Les deux configurations, avec et sans chemin de locale, sont prises en charge et expliquées dans ce guide.
 > Pour Next.js 12, 13, 14 et 15 avec App Router, reportez-vous à ce [guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_14.md).
 
 </Accordion>
-
 <Accordion header="Taille du bundle">
 
 Au lieu de charger de lourds fichiers JSON dans vos pages, ne chargez que le contenu strictement nécessaire. Intlayer vous aide à **réduire la taille de votre bundle et de vos pages jusqu'à 50 %**.
 
 </Accordion>
-
 <Accordion header="Maintenabilité">
 
 Déclarer le contenu directement au plus près de vos composants **facilite la maintenance** des applications de grande envergure. Vous pouvez dupliquer ou supprimer le dossier d'une fonctionnalité sans le fardeau mental de devoir passer en revue toute votre base de code de contenu. De plus, Intlayer est **entièrement typé** pour garantir l'exactitude de vos traductions.
 
 </Accordion>
-
 <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.
 
 </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**.
 
 </Accordion>
-
 <Accordion header="Performances">
 
 Associer de gros fichiers JSON à vos composants peut ralentir les performances et impacter la réactivité. Intlayer optimise le chargement du contenu directement au moment du **build**.
 
 </Accordion>
-
 <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.
@@ -123,12 +128,9 @@ Bien plus qu'une simple solution i18n, Intlayer propose un **[éditeur visuel](h
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Guide étape par étape pour configurer Intlayer dans une application Next.js
 
 <Steps>
-
 <Step number={1} title="Installer les dépendances">
 
 Installez les paquets nécessaires avec npm :
@@ -178,10 +180,16 @@ bun add intlayer next-intlayer
 Le package qui intègre Intlayer avec Next.js. Il fournit des fournisseurs de contexte et des hooks pour l'internationalisation dans Next.js. De plus, il inclut le plugin Next.js pour intégrer Intlayer avec [Webpack](https://webpack.js.org/) ou [Turbopack](https://nextjs.org/docs/app/api-reference/turbopack), ainsi qu'un proxy pour détecter la langue préférée de l'utilisateur, gérer les cookies et gérer la redirection des URL.
 
 </Step>
-
 <Step number={2} title="Configurez votre projet">
 
-Voici la structure finale que nous allons obtenir :
+Choisissez si votre application doit utiliser des chemins d'URL localisés (par ex. `/fr/about`, `/en/about`) ou servir du contenu sans segment de locale dans le chemin (par ex. `/about`, en détectant la locale via les cookies, les en-têtes ou les paramètres de requête).
+
+<Tabs group="routing-mode">
+<Tab label="Avec chemin de locale" value="with-locale-path">
+
+### Architecture
+
+Dans cette architecture, toutes les pages localisées sont imbriquées sous un segment de route dynamique `[locale]`. Cette approche est recommandée pour le SEO et le rendu statique car chaque langue dispose d'une URL dédiée :
 
 ```bash
 .
@@ -207,9 +215,65 @@ Voici la structure finale que nous allons obtenir :
 └── tsconfig.json
 ```
 
-> Si vous ne souhaitez pas de routage par locale, intlayer peut être utilisé comme un simple fournisseur / hook. Consultez [ce guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_no_locale_path.md) pour plus de détails.
+### Configuration
+
+Créez un fichier de configuration `intlayer.config.ts` pour déclarer les langues supportées de votre application :
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Vos autres locales
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+  routing: {
+    mode: "prefix-no-default", // ou `prefix-all`
+  },
+};
+
+export default config;
+```
+
+</Tab>
+<Tab label="Sans chemin de locale" value="without-locale-path">
+
+### Architecture
+
+Dans cette architecture, les routes n'incluent pas de segment dynamique `[locale]` dans le chemin d'URL. Toutes les pages se trouvent directement sous `src/app/`, et la locale est déterminée via des cookies, des en-têtes ou des paramètres de requête. C'est idéal pour les tableaux de bord, les outils internes ou les applications authentifiées où préfixer chaque URL n'est pas nécessaire :
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── layout.tsx
+│   │   ├── page.content.ts
+│   │   └── page.tsx
+│   ├── components
+│   │   ├── clientComponentExample
+│   │   │   ├── client-component-example.content.ts
+│   │   │   └── ClientComponentExample.tsx
+│   │   ├── localeSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   └── serverComponentExample
+│   │       ├── server-component-example.content.ts
+│   │       └── ServerComponentExample.tsx
+│   └── proxy.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuration
 
-Créez un fichier de configuration pour configurer les langues de votre application :
+Définissez la propriété `routing.mode` sur `"search-params"` (ex. `/about?locale=fr`) ou `"no-prefix"` pour servir du contenu sans préfixe d'URL :
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -224,15 +288,20 @@ const config: IntlayerConfig = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "search-params", // ou `no-prefix` - Utile pour la détection par le middleware
+  },
 };
 
 export default config;
 ```
 
+</Tab>
+</Tabs>
+
 > Grâce à ce fichier de configuration, vous pouvez configurer des URLs localisées, la redirection proxy, les noms de cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
 </Step>
-
 <Step number={3} title="Intégrer Intlayer dans votre configuration Next.js">
 
 Configurez votre environnement Next.js pour utiliser Intlayer :
@@ -293,9 +362,11 @@ export default withIntlayer(nextConfig);
 > ```
 
 </Step>
-
 <Step number={4} title="Définir les routes dynamiques des locales">
 
+<Tabs group="routing-mode">
+<Tab label="Avec chemin de locale" value="with-locale-path">
+
 Supprimez tout le contenu de `RootLayout` et remplacez-le par le code suivant :
 
 ```tsx {3} fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
@@ -387,13 +458,106 @@ export default LocaleLayout;
 ```
 
 > `generateStaticParams` garantit que votre application pré-construit les pages nécessaires pour toutes les locales, réduisant ainsi le calcul à l'exécution et améliorant l'expérience utilisateur. Pour plus de détails, consultez la [documentation Next.js sur generateStaticParams](https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering#generate-static-params).
->
-> Intlayer fonctionne avec `export const dynamic = 'force-static';` pour s'assurer que les pages sont pré-construites pour toutes les locales.
 
 > Intlayer fonctionne avec `export const dynamic = 'force-static';` pour s'assurer que les pages sont pré-construites pour toutes les locales.
 
-</Step>
+</Tab>
+<Tab label="Sans chemin de locale" value="without-locale-path">
+
+Dans une architecture sans chemin de locale, il n'y a pas de dossier `[locale]`. Configurez directement `src/app/layout.tsx` pour lire la locale depuis le contexte de la requête et enveloppez votre application avec `IntlayerProvider` :
+
+<Tabs>
+ <Tab label='Intlayer >=9.4' value='>=9.4'>
+
+```tsx {5} fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+import { getHTMLTextDir, getIntlayer } from "intlayer";
+import { getLocale, IntlayerProvider } from "next-intlayer/server";
+export { generateStaticParams } from "next-intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const { title, description, keywords } = getIntlayer("metadata", locale);
+
+  return {
+    title,
+    description,
+    keywords,
+  };
+};
 
+const RootLayout = async ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) => {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
+```
+
+> Un seul `IntlayerProvider` couvre les deux moitiés de l'arborescence : il initialise le contexte serveur délimité à la requête lu par les hooks serveur, et monte le fournisseur client pour que les composants client reçoivent la même locale.
+
+ </Tab>
+ <Tab label='Intlayer <9.4' value='<9.4'>
+
+```tsx {3} fileName="src/app/layout.tsx" codeFormat={["typescript", "esm"]}
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+import "./globals.css";
+import { IntlayerProvider, LocalPromiseParams } from "next-intlayer";
+import { getHTMLTextDir, getIntlayer } from "intlayer";
+import { getLocale } from "next-intlayer/server";
+export { generateStaticParams } from "next-intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const { title, description, keywords } = getIntlayer("metadata", locale);
+
+  return {
+    title,
+    description,
+    keywords,
+  };
+};
+
+const RootLayout = async ({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) => {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+};
+
+export default RootLayout;
+```
+
+ </Tab>
+</Tabs>
+
+</Tab>
+</Tabs>
+
+</Step>
 <Step number={5} title="Déclarez Votre Contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker les traductions :
@@ -441,7 +605,6 @@ export default pageContent;
 > Pour plus de détails, référez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
 </Step>
-
 <Step number={6} title="Utiliser le contenu dans votre code">
 
 Accédez à vos dictionnaires de contenu dans toute votre application :
@@ -479,7 +642,7 @@ export default Page;
 ```
 
 - **`IntlayerProvider`** est monté une seule fois, dans la mise en page de la locale. Il fournit la locale à la fois aux composants serveur et client, de sorte que les pages ne s'enveloppent plus elles-mêmes.
-- Les hooks serveur résolvent la locale dans cet ordre : la locale passée au site d'appel, puis le contexte serveur semé par le fournisseur, puis la locale portée par la requête (l'en-tête `x-intlayer-locale` défini par le proxy Intlayer, puis le cookie de locale). Cette dernière étape est ce qui maintient le contenu correct lors d'une navigation côté client qui ne ré-affiche que le segment de page, où la mise en page — et avec elle le fournisseur — ne se réexécute pas.
+- Les hooks serveur résolvent la locale dans cet ordre : la locale passée au site d'appel, puis le contexte serveur semé par le fournisseur, puis la locale portée par la requête (l'en-tête `x-intlayer-locale` défini par le proxy Intlayer, puis le cookie de locale). Cette dernière étape est ce qui maintient le contenu correct lors d'une navigation côté client qui ne ré-affiche que le segment de page, où la mise en page , et avec elle le fournisseur , ne se réexécute pas.
 
  </Tab>
  <Tab label='Intlayer <9.4' value='<9.4'>
@@ -591,10 +754,10 @@ export const ServerComponentExample: FC = () => {
 
 > Si vous souhaitez utiliser votre contenu dans un attribut de type `string`, tel que `alt`, `title`, `href`, `aria-label`, etc., vous devez appeler la valeur de la fonction, comme ceci :
 
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```tsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 > Pour en savoir plus sur le hook `useIntlayer`, consultez la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/next-intlayer/useIntlayer.md).
@@ -602,7 +765,6 @@ export const ServerComponentExample: FC = () => {
 > 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.
 
 </Step>
-
 <Step number={7} title="Configurer le proxy pour la détection de la langue" isOptional={true}>
 
 Configurez un proxy pour détecter la langue préférée de l'utilisateur :
@@ -630,7 +792,6 @@ export const proxy = multipleProxies([intlayerProxy, customProxy]);
 ```
 
 </Step>
-
 <Step number={8} title="Internationalisation de vos métadonnées" isOptional={true}>
 
 Dans le cas où vous souhaitez internationaliser vos métadonnées, telles que le titre de votre page, vous pouvez utiliser la fonction `generateMetadata` fournie par Next.js. À l'intérieur, vous pouvez récupérer le contenu depuis la fonction `getIntlayer` pour traduire vos métadonnées.
@@ -733,7 +894,6 @@ export const generateMetadata = async ({
 > En savoir plus sur l'optimisation des métadonnées [dans la documentation officielle de Next.js](https://nextjs.org/docs/app/building-your-application/optimizing/metadata).
 
 </Step>
-
 <Step number={9} title="Internationalisation de votre sitemap.xml et robots.txt" isOptional={true}>
 
 Pour internationaliser votre `sitemap.xml` et `robots.txt`, vous pouvez utiliser la fonction `getMultilingualUrls` fournie par Intlayer. Cette fonction vous permet de générer des URLs multilingues pour votre sitemap.
@@ -815,7 +975,6 @@ export default robots;
 > En savoir plus sur l'optimisation du sitemap [dans la documentation officielle de Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap). En savoir plus sur l'optimisation du fichier robots.txt [dans la documentation officielle de Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/robots).
 
 </Step>
-
 <Step number={10} title="Changer la langue de votre contenu" isOptional={true}>
 
 Pour changer la langue de votre contenu dans Next.js, la méthode recommandée est d'utiliser le composant `Link` pour rediriger les utilisateurs vers la page localisée appropriée. Le composant `Link` permet le préchargement de la page, ce qui aide à éviter un rechargement complet de la page.
@@ -904,7 +1063,6 @@ return (
 > - [`aria-current` attribute`](https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 </Step>
-
 <Step number={11} title="Création d'un composant Link localisé" isOptional={true}>
 
 Pour garantir que la navigation de votre application respecte la langue actuelle, vous pouvez créer un composant `Link` personnalisé. Ce composant préfixe automatiquement les URL internes avec la langue courante. Par exemple, lorsqu'un utilisateur francophone clique sur un lien vers la page "À propos", il est redirigé vers `/fr/about` au lieu de `/about`.
@@ -974,7 +1132,6 @@ export const Link: FC<PropsWithChildren<NextLinkProps>> = ({
 En intégrant ce composant `Link` dans toute votre application, vous maintenez une expérience utilisateur cohérente et adaptée à la langue, tout en bénéficiant d'une meilleure optimisation SEO et d'une meilleure utilisabilité.
 
 </Step>
-
 <Step number={12} title="Obtenir la locale actuelle dans les Server Actions" isOptional={true}>
 
 Si vous avez besoin de la locale active à l'intérieur d'une Server Action (par exemple, pour localiser des emails ou exécuter une logique sensible à la langue), appelez `getLocale` depuis `next-intlayer/server` :
@@ -1001,7 +1158,6 @@ export const myServerAction = async () => {
 > Cela garantit que la locale la plus appropriée est sélectionnée en fonction du contexte disponible.
 
 </Step>
-
 <Step number={13} title="Optimisez la taille de votre bundle" isOptional={true}>
 
 Lors de l'utilisation de `next-intlayer`, les dictionnaires sont inclus par défaut dans le bundle de chaque page. Pour optimiser la taille du bundle, Intlayer propose un plugin SWC optionnel qui remplace intelligemment les appels à `useIntlayer` en utilisant des macros. Cela garantit que les dictionnaires ne sont inclus que dans les bundles des pages qui les utilisent réellement.
@@ -1033,7 +1189,6 @@ bun add @intlayer/swc --dev
 > Note : Si vous définissez l'option comme `importMode: 'dynamic'` ou `importMode: 'fetch'` (dans la configuration des dictionnaires), elle reposera sur Suspense, vous devrez donc envelopper vos appels `useIntlayer` dans une limite `Suspense`. Cela signifie que vous ne pourrez pas utiliser `useIntlayer` directement au niveau supérieur de votre composant Page / Layout.
 
 </Step>
-
 <Step number={14} title="Extraire le contenu de vos composants" isOptional={true}>
 
 Si vous avez une base de code existante, transformer des milliers de fichiers peut prendre beaucoup de temps.
@@ -1075,7 +1230,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Commande d'extraction'>
+ <Tab value="Commande d'extraction">
 
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
@@ -1098,8 +1253,6 @@ 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.
-
 ```bash packageManager="npm"
 npm install @intlayer/babel --save-dev
 ```
@@ -1155,6 +1308,14 @@ bun run build # Or bun run dev
 
 ### Surveiller les modifications des dictionnaires avec Turbopack
 
+<Tabs>
+ <Tab label='Intlayer >=9.5' value='intlayer>=9.5'>
+
+Depuis Intlayer v9.5, `withIntlayer` démarre le content watcher lui-même, aucune configuration supplémentaire n'est nécessaire.
+
+ </Tab>
+ <Tab label='Intlayer <9.5' value='intlayer<9.5'>
+
 Lorsque vous utilisez Turbopack comme serveur de développement avec la commande `next dev`, les modifications des dictionnaires ne sont pas détectées automatiquement par défaut.
 
 Cette limitation survient parce que Turbopack ne peut pas exécuter les plugins webpack en parallèle pour surveiller les modifications dans vos fichiers de contenu. Pour contourner ce problème, vous devez utiliser la commande `intlayer watch` afin d’exécuter simultanément le serveur de développement et le surveillant de build Intlayer.
@@ -1171,6 +1332,9 @@ Cette limitation survient parce que Turbopack ne peut pas exécuter les plugins
 
 > Si vous utilisez next-intlayer@<=6.x.x, vous devez conserver le flag `--turbopack` pour que l'application Next.js 16 fonctionne correctement avec Turbopack. Nous recommandons d'utiliser next-intlayer@>=7.x.x pour éviter cette limitation.
 
+ </Tab>
+</Tabs>
+
 ### Configurer TypeScript
 
 Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
@@ -1236,25 +1400,21 @@ Next.js n'a pas de couche de messages intégrée depuis que le champ `i18n` de `
 La différence pratique est ce qui atteint le navigateur. Les bibliothèques basées sur des espaces de noms livrent des catalogues JSON entiers à une page, tandis qu'Intlayer ne livre que le contenu que les composants rendus utilisent, ce qui réduit la taille du bundle et des pages jusqu'à 50 %. Voir [pourquoi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/interest_of_intlayer.md) et le [benchmark i18n Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/benchmark/nextjs.md).
 
 </Question>
-
 <Question title="Quel poids l'i18n ajoute-t-elle à la taille de mon bundle Next.js ?">
 
 Bien moins qu'une configuration basée sur des espaces de noms, car une page ne télécharge jamais un catalogue qu'elle n'affiche pas. Les Server Components résolvent leur contenu sur le serveur, et le compilateur au moment du build remplace les appels `useIntlayer` par les entrées de dictionnaire exactes qu'un composant utilise, si bien que les clés inutilisées et les langues inutilisées sont éliminées, et les [dictionnaires dynamiques](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dynamic_dictionaries/index.md) répartissent le reste par locale. Mesuré face aux alternatives habituelles, Intlayer réduit la taille du bundle et des pages jusqu'à 50 %. Voir l'[optimisation du bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/bundle_optimization.md) et le [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/benchmark/nextjs.md).
 
 </Question>
-
 <Question title="Puis-je migrer depuis `next-intl`, `next-i18next` ou `i18next` sans réécrire mes composants ?">
 
 Oui, et il existe deux voies. Vous pouvez migrer le contenu progressivement avec le [guide de migration next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/migration_from_next-intl_to_intlayer.md) ou le [guide de migration i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/migration_from_i18next_to_intlayer.md). Ou vous pouvez conserver entièrement votre API actuelle : les [adaptateurs de compatibilité](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compat/index.md) exposent exactement la même API que `next-intl`, `react-i18next` et `react-intl`, mais servie par des dictionnaires Intlayer : seuls les imports changent, pas le code des composants.
 
 </Question>
-
 <Question title="Puis-je conserver mes fichiers de traduction JSON existants ?">
 
 Oui. Le [plugin de synchronisation JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-json.md) conserve vos fichiers `/messages/{locale}/{namespace}.json` comme source de vérité et génère les dictionnaires Intlayer à partir d'eux, dans les deux sens. Un [plugin de synchronisation PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/plugins/sync-po.md) fait de même pour les catalogues gettext, et les [fichiers par locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/per_locale_file.md) permettent de séparer le contenu par langue au lieu de regrouper les locales dans un seul fichier.
 
 </Question>
-
 <Question title="Dois-je déplacer mon contenu clé par clé ?">
 
 Non. Lancez `npx intlayer extract` et Intlayer lit vos composants, en extrait les chaînes destinées aux utilisateurs et écrit un fichier `.content` à côté de chacun, de sorte que vous relisez un diff plutôt que de copier des chaînes dans un catalogue une par une. L'étape 14 de ce guide le détaille.
@@ -1264,7 +1424,6 @@ Pour un pipeline entièrement automatisé, le [compilateur Intlayer](https://git
 Deux limites méritent d'être connues avant d'activer le compilateur. Il fonctionne par analyse statique : les chaînes qui n'existent qu'à l'exécution, comme les codes d'erreur d'API ou les champs de CMS, restent hors de portée. Et il doit distinguer le texte destiné aux utilisateurs de la logique applicative comme `className="active"` ou un code de statut, ce qui nécessite quelques annotations dans une grande base de code. La [commande extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/extract.md) évite les deux en vous gardant dans la boucle.
 
 </Question>
-
 <Question title="Quels outils d'éditeur et d'agent IA sont disponibles ?">
 
 Cinq éléments, tous optionnels :
@@ -1276,19 +1435,16 @@ Cinq éléments, tous optionnels :
 - **[Plugin ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/eslint.md)** : `no-raw-text` signale les chaînes codées en dur, avec d'autres règles pour les clés de dictionnaire statiques et le contenu inutilisé.
 
 </Question>
-
 <Question title="Intlayer fonctionne-t-il avec l'App Router de Next.js et les React Server Components ?">
 
 Oui. `next-intlayer` est conçu pour l'App Router : le contenu est résolu sur le serveur à l'intérieur des Server Components, si bien qu'aucun dictionnaire n'est envoyé au client pour le texte rendu côté serveur. Les Client Components utilisent le même hook `useIntlayer` via le provider. Intlayer ne bloque pas le rendu statique, et il est compatible avec Turbopack.
 
 </Question>
-
 <Question title="Quelles versions de Next.js Intlayer prend-il en charge ?">
 
 Intlayer prend en charge Next.js 12, 13, 14, 15 et 16. Ce guide couvre Next.js 16. Pour les configurations plus anciennes, suivez le [guide Next.js 15](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_15.md), le [guide Next.js 14](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_14.md) ou le [guide Pages Router](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_page_router.md).
 
 </Question>
-
 <Question title="Dois-je mettre la locale dans l'URL, comme /fr/about ?">
 
 Non. Le schéma d'URL est une option de configuration, pas une contrainte. `routing.mode` accepte :
@@ -1298,40 +1454,34 @@ Non. Le schéma d'URL est une option de configuration, pas une contrainte. `rout
 - `"no-prefix"` : aucune locale dans le chemin, résolue à partir d'un cookie, d'un en-tête ou d'un domaine.
 - `"search-params"` : `/about?locale=fr`.
 
-Vous pouvez aussi associer chaque locale à son propre domaine avec `routing.domains`. Voir la [référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md) et le [guide sans chemin de locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_no_locale_path.md).
+Vous pouvez aussi associer chaque locale à son propre domaine avec `routing.domains`. Voir la [référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md) et l'[Étape 2](#step-2-configure-your-project) pour les options de mode de routage.
 
 </Question>
-
 <Question title="Comment ajouter des balises hreflang et des métadonnées localisées pour le SEO ?">
 
 Utilisez la fonction `generateMetadata` de Next.js avec `getMultilingualUrls` d'Intlayer. Elle construit la carte `alternates.languages` pour chaque locale déclarée, y compris l'entrée `x-default`, afin que les moteurs de recherche servent la bonne version linguistique. Le même utilitaire localise `sitemap.ts` et `robots.ts`. Les étapes 8 et 9 de ce guide montrent le code complet.
 
 </Question>
-
 <Question title="Comment traduire une application Next.js automatiquement avec l'IA ?">
 
 Lancez `npx intlayer fill`. La CLI détecte les traductions manquantes dans vos fichiers de contenu et les remplit avec le LLM de votre choix, en utilisant votre propre fournisseur et votre clé d'API, si bien que vous payez le fournisseur directement et que rien ne transite par un tiers. Voir la [commande fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/fill.md) et l'[intégration CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/CI_CD.md).
 
 </Question>
-
 <Question title="Intlayer prend-il en charge les pluriels, le genre, les conditions et le texte enrichi ?">
 
 Oui. Les déclarations de contenu prennent en charge les [formes plurielles](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/plurial.md), le [contenu basé sur le genre](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/gender.md), les conditions, les [insertions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/insertion.md) pour les valeurs interpolées, et le [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/markdown.md) pour le texte enrichi tel que les pages légales ou les corps d'articles de blog. Les nombres, les dates et les devises sont gérés par les [formateurs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/formatters.md).
 
 </Question>
-
 <Question title="Comment les traducteurs et les non-développeurs peuvent-ils modifier le contenu ?">
 
 Deux options, toutes deux optionnelles. L'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) tourne sur votre propre infrastructure et permet à quiconque de cliquer sur le texte de votre site pour le modifier sur place. Le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md) externalise le contenu afin qu'il puisse être mis à jour sans déploiement, avec la [synchronisation en direct](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/cli/live.md) qui reflète les changements à l'exécution.
 
 </Question>
-
 <Question title="Comment détecter les traductions manquantes avant la mise en production ?">
 
 Lancez `npx intlayer test` en CI. Il fait échouer le build lorsqu'une locale déclarée manque de contenu, si bien qu'une chaîne non traduite n'atteint jamais la production. L'[extension VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/vs_code_extension.md) fait remonter les mêmes erreurs pendant que vous tapez, et le [plugin ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/eslint.md) et sa règle `no-raw-text` détectent les chaînes codées en dur. Voir [tester votre contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/testing.md).
 
 </Question>
-
 <Question title="Intlayer est-il gratuit et open source ?">
 
 Oui. Intlayer est open source sous licence Apache 2.0, et l'ensemble de la bibliothèque, la CLI, l'éditeur visuel et le compilateur sont gratuits à utiliser, y compris commercialement. Le CMS hébergé est un service payant optionnel, et il peut aussi être [auto-hébergé](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/self_hosting.md).