@intlayer/docs 9.4.3 → 9.5.0

package/blog/fr/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,294 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Comment rendre multilingue (i18n) une application Next.js existante après coup (Guide i18n 2026)"
+description: "Le guide 2026 pour rendre multilingue (i18n) une application Next.js existante sans refactorisation fastidieuse. Découvrez l'extraction sans effort, la traduction IA et le routage performant avec Intlayer."
+keywords:
+  - Next.js i18n
+  - Internationalisation
+  - Traduire application Next.js existante
+  - Next.js 16
+  - Intlayer
+  - Multilingue
+  - React i18n
+  - Compilateur
+  - Traduction IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Comment rendre multilingue (i18n) une application Next.js existante après coup (Guide i18n 2026)
+
+Ajouter l'internationalisation (i18n) à un projet Next.js dès le premier jour est relativement simple. Mais que se passe-t-il lorsque vous disposez déjà d'une application Next.js mature en production, conçue dans une seule langue, et que vous devez la rendre multilingue **après coup** ?
+
+Si vous avez déjà tenté l'expérience avec des bibliothèques traditionnelles comme `next-intl` ou `next-i18next`, vous connaissez le cauchemar :
+
+- Rechercher manuellement des chaînes de texte codées en dur dans des centaines de composants JSX/TSX.
+- Créer manuellement des fichiers JSON imbriqués et inventer des clés de traduction arbitraires (`pages.dashboard.header.title`, etc.).
+- Remplacer le texte JSX par des appels de hooks verbeux (`t('...')`).
+- Restructurer l'intégralité du dossier `app/` en `app/[locale]/...`, ce qui casse les routes existantes, les favoris et l'indexation des moteurs de recherche.
+
+En 2026, vous n'avez plus besoin de réécrire votre base de code pour internationaliser votre application Next.js. Avec **Intlayer**, vous pouvez intégrer l'internationalisation dans une application Next.js existante en quelques minutes grâce à l'extraction automatisée, la traduction assistée par IA et un routage non intrusif.
+
+> Vous recherchez le guide technique pas-à-pas complet pour Next.js 16 App Router ? Consultez notre documentation dédiée : [Traduire Next.js 16 avec Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md).
+
+## Table des matières
+
+<TOC/>
+
+## Le dilemme de l'adaptation : Pourquoi internationaliser une application existante est difficile
+
+Lors de l'internationalisation d'une application Next.js existante, les développeurs rencontrent trois obstacles majeurs :
+
+1. **Perturbation du code** : Extraire manuellement les textes vers des dictionnaires JSON nécessite de modifier presque chaque fichier de composant, générant d'énormes diffs git et des risques de régression.
+2. **Contrainte de routage** : Les bibliothèques i18n traditionnelles vous obligent généralement à déplacer votre layout racine et vos pages dans un segment dynamique `[locale]` (ex. `/app/[locale]/page.tsx`). Pour une application existante, cela perturbe les middlewares, les chemins relatifs et les intégrations tierces.
+3. **Travail fastidieux de traduction** : Une fois les chaînes extraites, traduire les dictionnaires en 5, 10 ou 20 langues nécessite des copier-coller sans fin ou des services de gestion de localisation coûteux.
+
+Intlayer résout ces problèmes au niveau architectural grâce à **l'extraction assistée par compilateur**, aux **dictionnaires déclaratifs** et à un **routage flexible**.
+
+## Extraction automatisée du contenu (fini la recherche manuelle de textes)
+
+### Option A : L'outil CLI d'extraction (`npx intlayer extract`)
+
+Vous pouvez exécuter l'outil d'extraction d'Intlayer directement sur votre code :
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Cette commande analyse vos composants React, extrait les textes visibles par l'utilisateur et génère automatiquement des fichiers de déclaration de contenu (`.content.ts`) directement à côté de chaque composant. Votre code reste déclaratif, lisible et entièrement typé.
+
+### Option B : Le compilateur Intlayer (Extraction à la compilation)
+
+Avec le compilateur Intlayer activé dans votre configuration, vous continuez simplement à écrire vos composants avec du texte brut dans votre langue par défaut. Lors du build, le compilateur extrait les textes et injecte automatiquement le contenu localisé :
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+En coulisses, Intlayer construit le dictionnaire et associe le composant à son contenu localisé, éliminant totalement l'étape de refactorisation manuelle.
+
+Dans ce cas, il générera un fichier `src/app/page.content.ts` avec le contenu suivant :
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traduction assistée par IA avec votre LLM favori
+
+Une fois votre contenu extrait, le traduire en plusieurs langues ne devrait pas prendre des jours. Intlayer intègre une CLI de traduction IA compatible avec OpenAI, Anthropic, DeepSeek ou Mistral en utilisant vos propres clés d'API :
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Tableau de bord SaaS pour la productivité et la collaboration d'équipe",
+  },
+};
+
+export default config;
+```
+
+L'exécution de `npx intlayer fill` remplit vos déclarations `.content.ts` avec les traductions de vos locales configurées :
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      de: "Willkommen auf unserer Plattform",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Parce qu'Intlayer fournit un `applicationContext` global au LLM, les traductions générées préservent les nuances techniques, le ton de la marque et le contexte grammatical bien mieux que les outils automatisés traditionnels.
+
+Pour vérifier qu'aucune chaîne de texte n'a été oubliée avant la mise en production :
+
+```bash
+npx intlayer test
+```
+
+## Ajouter le routage multilingue sans casser les URLs existantes
+
+L'une des plus grandes craintes lors de la traduction d'une application existante est de devoir repenser le routage. Intlayer offre une flexibilité totale :
+
+- **Mode paramètres d'URL / Cookies (`search-params`)** : Conservez exactement votre structure de dossiers (`/app/page.tsx`, `/app/dashboard/page.tsx`) sans créer de dossier `[locale]`. Le changement de langue s'effectue par paramètre (ex. `?locale=en`) ou via un cookie.
+- **Mode préfixe (`prefix` / `prefix-all-locales`)** : Lorsque vous êtes prêt pour des URLs optimisées pour le SEO (`/fr/dashboard`, `/en/dashboard`), Intlayer gère le préfixe de manière transparente avec son proxy.
+
+Configurez votre intégration Next.js en quelques secondes :
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Entourez votre layout racine avec `IntlayerProvider` :
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## SEO multilingue
+
+Assurez une visibilité internationale en générant vos métadonnées localisées, balises OpenGraph et liens canoniques `hreflang` :
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## En savoir plus : Prêt pour la mise en œuvre pas-à-pas ?
+
+Ce guide présente une vue d'ensemble des solutions pour adapter une application Next.js existante à l'internationalisation en 2026 sans friction architecturale. Pour suivre le guide technique pas-à-pas complet, incluant la configuration du middleware, la génération statique (`generateStaticParams`), les sitemaps localisés et l'intégration des Server Components, rendez-vous sur notre documentation détaillée :
+
+👉 **[Guide complet pour traduire Next.js 16 avec Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_nextjs_16.md)**
+
+## Foire aux questions (FAQ)
+
+<FAQ>
+
+<Question title="Puis-je rendre mon application Next.js multilingue sans déplacer mes fichiers dans app/[locale] ?">
+
+Oui. Intlayer prend en charge `routing.mode: "search-params"` ainsi que la détection par cookie ou en-tête HTTP. Vous pouvez conserver votre structure de dossiers existante sans casser vos URLs ni vos redirections.
+
+</Question>
+<Question title="Dois-je remplacer manuellement chaque chaîne de texte de mon application ?">
+
+Non. Vous pouvez utiliser `npx intlayer extract` pour détecter et extraire automatiquement les textes vers des déclarations localisées, ou utiliser le compilateur Intlayer pour transformer vos composants à la compilation.
+
+</Question>
+<Question title="Comment Intlayer réduit-il la taille du bundle Next.js par rapport à next-intl ou next-i18next ?">
+
+Intlayer utilise des déclarations de contenu par composant et une optimisation par macros à la compilation. Le client ne charge que les traductions nécessaires aux composants affichés, et les Server Components s'exécutent côté serveur sans surcoût client.
+
+</Question>
+<Question title="Puis-je utiliser l'IA pour traduire automatiquement mes composants ?">
+
+Oui. La commande `npx intlayer fill` se connecte au fournisseur d'IA de votre choix (OpenAI, Anthropic, Mistral, DeepSeek) pour générer automatiquement les traductions manquantes en préservant le contexte.
+
+</Question>
+</FAQ>

package/blog/fr/transform_existing_vite_react_app_using_compiler.md

@@ -0,0 +1,351 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2026-09-06
+title: "Comment rendre multilingue (i18n) une application Vite et React existante après coup (Guide i18n 2026)"
+description: "Le guide 2026 pour rendre multilingue (i18n) une application Vite et React existante sans refactorisation fastidieuse. Découvrez l'extraction sans effort, la traduction IA et le bundle optimisé avec Intlayer."
+keywords:
+  - Vite i18n
+  - React i18n
+  - Internationalisation
+  - Traduire application Vite existante
+  - Traduire application React existante
+  - Intlayer
+  - Multilingue
+  - Compilateur
+  - Traduction IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-react-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+applicationShowcase: https://intlayer-vite-react-template.vercel.app
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Comment rendre multilingue (i18n) une application Vite et React existante après coup (Guide i18n 2026)
+
+Ajouter l'internationalisation (i18n) à un projet Vite et React dès le premier jour est relativement simple. Mais que se passe-t-il lorsque vous disposez déjà d'une application mature en production, conçue dans une seule langue, et que vous devez la rendre multilingue **après coup** ?
+
+Si vous avez déjà tenté l'expérience avec des bibliothèques traditionnelles comme `react-i18next` ou `react-intl`, vous connaissez le cauchemar :
+
+- Rechercher manuellement des chaînes de texte codées en dur dans des centaines de composants JSX et TSX.
+- Créer manuellement des fichiers JSON imbriqués et inventer des clés de traduction arbitraires (`components.header.title`, etc.).
+- Remplacer le texte JSX par des appels de hooks verbeux (`t('...')`).
+- Restructurer le routage côté client, la gestion d'état et la logique de changement de langue.
+
+En 2026, vous n'avez plus besoin de réécrire votre base de code pour internationaliser votre application Vite et React. Avec **Intlayer**, vous pouvez intégrer l'internationalisation dans une application existante en quelques minutes grâce à l'extraction automatisée, la traduction assistée par IA et une intégration fluide.
+
+> Vous recherchez le guide technique pas-à-pas complet pour Vite et React ? Consultez notre documentation dédiée : [Traduire Vite et React avec Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md).
+
+## Table des matières
+
+<TOC/>
+
+## Le dilemme de l'adaptation : Pourquoi internationaliser une application existante est difficile
+
+Lors de l'internationalisation d'une application Vite et React existante, les développeurs rencontrent trois obstacles majeurs :
+
+1. **Perturbation du code** : Extraire manuellement les textes vers des dictionnaires JSON nécessite de modifier presque chaque fichier de composant, générant d'énormes diffs git, des conflits de fusion et des risques de régression.
+2. **Surcharge de gestion des clés** : Inventer des clés telles que `dashboard.hero.ctaButton` pour chaque extrait de texte ralentit le développement et ajoute une charge cognitive à chaque mise à jour de l'UI.
+3. **Travail fastidieux de traduction** : Une fois les chaînes extraites, traduire les dictionnaires en 5, 10 ou 20 langues nécessite des copier-coller sans fin ou des services de gestion de localisation coûteux.
+
+Intlayer résout ces défis au niveau architectural grâce à **l'extraction assistée par compilateur**, aux **dictionnaires déclaratifs par composant** et à une **intégration transparente avec Vite**.
+
+## Extraction automatisée du contenu (fini la recherche manuelle de textes)
+
+Au lieu d'extraire manuellement chaque chaîne de votre JSX, Intlayer propose deux parcours sans friction :
+
+### Option A : L'outil CLI d'extraction (`npx intlayer extract`)
+
+Vous pouvez exécuter l'outil d'extraction d'Intlayer directement sur votre code :
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Cette commande analyse vos composants React, extrait les textes visibles par l'utilisateur et génère automatiquement des fichiers de déclaration de contenu (`.content.ts`) directement à côté de chaque composant. Votre logique de composant reste déclarative, lisible et entièrement typée, sans devoir inventer de clés manuellement.
+
+### Option B : Le compilateur Intlayer (Extraction à la compilation)
+
+Avec le compilateur Intlayer activé dans votre configuration, vous continuez simplement à écrire vos composants avec du texte brut dans votre langue par défaut. Lors du build, le compilateur extrait les textes et injecte automatiquement le contenu localisé :
+
+```tsx fileName="src/App.tsx"
+// Écrivez du code React normal. Le compilateur extrait le texte automatiquement
+export default function App() {
+  return (
+    <section>
+      <h1>Bienvenue sur notre plateforme</h1>
+      <p>Découvrez nos fonctionnalités modernes dès aujourd'hui.</p>
+    </section>
+  );
+}
+```
+
+En coulisses, Intlayer construit le dictionnaire et associe le composant à son contenu localisé, éliminant totalement l'étape de refactorisation manuelle.
+
+Dans ce cas, il générera un fichier de déclaration `src/App.content.ts` avec la structure suivante :
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bienvenueSurNotrePlateforme: t({ fr: "Bienvenue sur notre plateforme" }),
+    decouvrezNosFonctionnalitesModernes: t({
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traduction assistée par IA avec votre LLM favori
+
+Une fois votre contenu extrait, le traduire en plusieurs langues ne devrait pas prendre des jours. Intlayer intègre une CLI de traduction IA compatible avec OpenAI, Anthropic, DeepSeek ou Mistral en utilisant vos propres clés d'API :
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+Configurez vos langues et votre fournisseur d'IA dans `intlayer.config.ts` :
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.FRENCH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Application SaaS moderne et tableau de bord conçus avec Vite et React",
+  },
+};
+
+export default config;
+```
+
+L'exécution de `npx intlayer fill` remplit automatiquement vos déclarations de contenu avec des traductions de haute qualité pour toutes les langues configurées :
+
+```typescript fileName="src/App.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "app",
+  content: {
+    bienvenueSurNotrePlateforme: t({
+      fr: "Bienvenue sur notre plateforme",
+      en: "Welcome to our platform",
+      es: "Bienvenido a nuestra plataforma",
+      de: "Willkommen auf unserer Plattform",
+    }),
+    decouvrezNosFonctionnalitesModernes: t({
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      en: "Start exploring our modern features today.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Parce qu'Intlayer fournit l'`applicationContext` au LLM, les traductions générées respectent le contexte technique, la voix de la marque et les nuances grammaticales bien mieux que les outils génériques.
+
+Pour vérifier qu'aucune chaîne n'a été oubliée avant la mise en production :
+
+```bash
+npx intlayer test
+```
+
+## Intégration Vite et configuration du Provider
+
+Intégrer Intlayer dans Vite consiste simplement à ajouter le plugin dans `vite.config.ts` et à envelopper votre composant racine avec `IntlayerProvider` :
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+> Depuis Intlayer v9, le compilateur est inclus directement dans le plugin `intlayer()` et s'active automatiquement dès que `compiler.enabled` est défini dans `intlayer.config.ts`.
+
+Enveloppez votre application avec `IntlayerProvider` dans votre composant racine :
+
+```tsx fileName="src/App.tsx"
+import { FC } from "react";
+import { IntlayerProvider } from "react-intlayer";
+import { MainContent } from "./MainContent";
+
+const App: FC = () => {
+  return (
+    <IntlayerProvider>
+      <MainContent />
+    </IntlayerProvider>
+  );
+};
+
+export default App;
+```
+
+### Changer de langue dynamiquement
+
+Changez de langue facilement n'importe où dans votre application grâce au hook `useLocale` :
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { FC } from "react";
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export const LocaleSwitcher: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  return (
+    <select
+      value={locale}
+      onChange={(e) => setLocale(e.target.value as Locales)}
+    >
+      {availableLocales.map((loc) => (
+        <option key={loc} value={loc}>
+          {loc}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## SEO Multilingue (Sitemap et Robots.txt)
+
+Intlayer inclut des formateurs tels que `generateSitemap` et `getMultilingualUrls` qui produisent des fichiers `sitemap.xml` et `robots.txt` multilingues prêts pour les moteurs de recherche :
+
+```javascript fileName="generate-seo.mjs"
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { generateSitemap, getMultilingualUrls } from "intlayer";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SITE_URL = (process.env.SITE_URL || "https://example.com").replace(
+  /\/$/,
+  ""
+);
+
+const pathList = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
+
+const getAllMultilingualUrls = (urls) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+const robotsTxt = [
+  "User-agent: *",
+  "Allow: /",
+  ...disallowedPaths.map((path) => `Disallow: ${path}`),
+  "",
+  `Sitemap: ${SITE_URL}/sitemap.xml`,
+].join("\n");
+
+fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);
+console.log("Fichiers SEO générés avec succès.");
+```
+
+Ajoutez un hook `prebuild` dans votre `package.json` pour exécuter ce script avant `vite build` :
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "dev": "vite",
+    "prebuild": "node generate-seo.mjs",
+    "build": "vite build",
+    "preview": "vite preview"
+  }
+}
+```
+
+## En savoir plus : Prêt pour la mise en place pas-à-pas ?
+
+Ce guide présente une vue d'ensemble conceptuelle pour moderniser et internationaliser une application Vite et React existante en 2026 sans refactorisation complexe.
+
+Si vous souhaitez configurer chaque partie de votre application en détail, y compris le typage strict TypeScript, les dictionnaires dynamiques et l'éditeur visuel, consultez notre guide complet :
+
+👉 **[Guide complet pour traduire Vite et React avec Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)**
+
+## Foire aux questions (FAQ)
+
+<FAQ>
+
+<Question title="Puis-je rendre mon application Vite et React multilingue sans refactoriser manuellement toutes les chaînes ?">
+
+Oui. Vous pouvez utiliser `npx intlayer extract` pour détecter et extraire automatiquement les textes codés en dur dans des déclarations de contenu localisées, ou utiliser le compilateur Intlayer pour transformer les composants au moment du build pendant que vous continuez à écrire du JSX standard.
+
+</Question>
+<Question title="Comment Intlayer réduit-il la taille du bundle Vite par rapport à react-i18next ou react-intl ?">
+
+Intlayer utilise des définitions de dictionnaires par composant et une optimisation par macros à la compilation. Vos bundles ne reçoivent que les champs exacts requis par les composants affichés, au lieu d'importer de volumineux fichiers JSON. Les dictionnaires dynamiques permettent également de charger les langues à la demande.
+
+</Question>
+<Question title="Puis-je utiliser l'IA pour traduire mes composants existants dans plusieurs langues ?">
+
+Oui. La CLI d'Intlayer inclut la commande `npx intlayer fill`, qui se connecte au fournisseur d'IA de votre choix (OpenAI, Anthropic, Mistral, DeepSeek) pour générer des traductions contextuelles pour toutes les langues configurées.
+
+</Question>
+<Question title="Puis-je migrer depuis react-i18next ou react-intl sans réécrire mes composants ?">
+
+Oui. Intlayer fournit des adaptateurs de compatibilité pour `react-i18next` et `react-intl`, ainsi que des plugins pour synchroniser vos fichiers de traduction JSON existants (`sync-json`).
+
+</Question>
+
+</FAQ>