@intlayer/docs 9.4.0-canary.0 → 9.4.0

package/docs/fr/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-06-23
+updatedAt: 2026-08-25
 title: "TanStack Start i18n - Guide complet pour traduire votre application"
 description: "Oubliez i18next. Le guide 2026 pour créer une application TanStack Start multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
@@ -21,6 +21,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-tanstack-start-templ
 applicationShowcase: https://intlayer-tanstack-start-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=_XTdKVWaeqg
 history:
+  - version: 9.4.0
+    date: 2026-08-25
+    changes: "Comparer les résolutions statique, dynamique et dynamique mise en cache des dictionnaires de métadonnées dans les fonctions head des routes"
   - 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"
@@ -509,13 +512,14 @@ export const useLocalizedNavigate = () => {
 
 <Step number={8} title="Utiliser Intlayer dans vos pages">
 
+> Utilisez **`useIntlayer`** par défaut : c'est la manière recommandée de lire du contenu dans vos composants, et le compilateur le résout vers la locale rendue. Ne recourez à `getIntlayer` / `getIntlayerAsync` qu'en dehors de l'arbre React : le `head` des routes, les loaders et les server functions.
+
 Accédez à vos dictionnaires de contenu dans toute votre application :
 
 #### Page d'accueil localisée
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
 import { useIntlayer } from "react-intlayer";
 
 import LocaleSwitcher from "@/components/locale-switcher";
@@ -553,19 +557,19 @@ function RouteComponent() {
 }
 ```
 
-> 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 :
-
+> Si vous souhaitez utiliser votre contenu dans un attribut `string`, tel que `alt`, `title`, `href`, `aria-label`, etc., vous pouvez utiliser la valeur de la fonction, comme :
+>
 > ```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)}" />
 > ```
 
-> Pour en savoir plus sur le hook `useIntlayer`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md).
+> Pour en savoir plus sur le hook `useIntlayer`, consultez la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md).
 
 </Step>
 
-<Step number={9} title="Créer un composant sélecteur de langue">
+<Step number={9} title="Créer un composant Locale Switcher">
 
 Créez un composant pour permettre aux utilisateurs de changer de langue :
 
@@ -601,19 +605,19 @@ export const LocaleSwitcher: FC = () => {
             to={pathWithoutLocale as To}
           >
             <span>
-              {/* Locale - ex: FR */}
+              {/* Locale - par ex. FR */}
               {localeEl}
             </span>
             <span>
-              {/* Langue dans sa propre locale - ex: Français */}
+              {/* Langue dans sa propre locale - par ex. Français */}
               {getLocaleName(localeEl, locale)}
             </span>
             <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* Langue dans la locale actuelle - ex: Francés avec la locale actuelle définie sur Locales.SPANISH */}
+              {/* Langue dans la locale actuelle - par ex. Francés avec la locale actuelle définie sur Locales.SPANISH */}
               {getLocaleName(localeEl)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Langue en anglais - ex: French */}
+              {/* Langue en anglais - par ex. French */}
               {getLocaleName(localeEl, Locales.ENGLISH)}
             </span>
           </LocalizedLink>
@@ -624,7 +628,7 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
-> Pour en savoir plus sur le hook `useLocale`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md).
+> Pour en savoir plus sur le hook `useLocale`, consultez la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md).
 
 </Step>
 
@@ -633,6 +637,8 @@ export const LocaleSwitcher: FC = () => {
 Comme vu à l'étape 5, vous pouvez gérer les attributs `lang` et `dir` de la balise `html` en utilisant `useParams` dans votre composant racine. Cela garantit que les attributs corrects sont définis sur le serveur et le client.
 
 ```tsx fileName="src/routes/__root.tsx"
+const localeRoute = getRouteApi("/{-$locale}");
+
 function RootDocument({ children }: { children: ReactNode }) {
   const params = localeRoute.useParams();
   const locale = params?.locale ?? defaultLocale;
@@ -651,9 +657,11 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 <Step number={11} title="Ajouter un middleware">
 
-Vous pouvez également utiliser `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.
+Vous pouvez également utiliser `intlayerProxy` pour ajouter du routing 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 `intlayerProxy` en production, vous devez passer le package `vite-intlayer` de `devDependencies` à `dependencies`.
 
-> Notez que pour utiliser `intlayerProxy` en production, vous devez déplacer le paquet `vite-intlayer` de `devDependencies` vers `dependencies`.
+> Depuis Intlayer v9, `intlayerProxy()` est fourni directement dans le plugin `intlayer()` et activé par défaut via l'option `routing.enableProxy` (`true` par défaut). L'enregistrer séparément comme montré ci-dessous est maintenant optionnel : il est conservé pour la compatibilité rétroactive et pour les configurations qui doivent contrôler l'ordre des plugins. Définissez `routing.enableProxy: false` pour désactiver. Consultez les [notes de version v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/releases/v9.md).
 
 ```typescript fileName="vite.config.ts"
 import { tanstackStart } from "@tanstack/react-start/plugin/vite";
@@ -687,34 +695,43 @@ export default defineConfig({
 
 <Step number={12} title="Internationaliser vos métadonnées">
 
-Vous pouvez également utiliser le hook `getIntlayer` pour accéder à vos dictionnaires de contenu dans toute votre application :
+<Tabs>
+
+<Tab label="Résolution statique" value="static">
+
+`getIntlayer` se résout de façon synchrone par rapport au dictionnaire **fusionné**, celui qui contient chaque locale déclarée. `head` reste synchrone et rien n'est attendu, mais tout le dictionnaire multilingue est inclus dans le chunk de route envoyé au navigateur.
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createFileRoute } from "@tanstack/react-router";
-import { getIntlayer } from "intlayer";
+import {
+  defaultLocale,
+  getIntlayer,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
 
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
-    const { locale } = params;
-    const path = "/"; // The path for this route
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Le chemin pour cette route
 
     const metaContent = getIntlayer("app", locale);
 
     return {
       links: [
-        // Canonical link: Points to the current localized page
+        // Lien canonique : Points vers la page localisée actuelle
         { rel: "canonical", href: getLocalizedUrl(path, locale) },
 
-        // Hreflang: Tell Google about all localized versions
+        // Hreflang : Indiquer à Google toutes les versions localisées
         ...localeMap(({ locale: mapLocale }) => ({
           rel: "alternate",
           hrefLang: mapLocale,
           href: getLocalizedUrl(path, mapLocale),
         })),
 
-        // x-default: For users in unmatched languages
-        // Define the default fallback locale (usually your primary language)
+        // x-default : Pour les utilisateurs dans les langues non correspondantes
+        // Définir la locale de secours par défaut (généralement votre langue principale)
         {
           rel: "alternate",
           hrefLang: "x-default",
@@ -730,16 +747,153 @@ export const Route = createFileRoute("/{-$locale}/")({
 });
 ```
 
+Meilleur pour les petits dictionnaires de métadonnées, une poignée de locales, ou lors du prototypage.
+
+</Tab>
+
+<Tab label="Résolution dynamique" value="dynamic">
+
+`getIntlayerAsync` (disponible à partir de **v9.4**) se comporte comme `getIntlayer`, mais le plugin de build la pointe vers le chunk par locale dans `.intlayer/dynamic_dictionaries/` au lieu du dictionnaire fusionné. Une page envoie donc uniquement la locale qu'elle affiche. Parce que ce chunk est chargé à la demande, `head` devient `async` :
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  head: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Le chemin pour cette route
+
+    const metaContent = await getIntlayerAsync("app", locale);
+
+    return {
+      links: [
+        // Lien canonique : Points vers la page localisée actuelle
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang : Indiquer à Google toutes les versions localisées
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default : Pour les utilisateurs dans les langues non correspondantes
+        // Définir la locale de secours par défaut (généralement votre langue principale)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: metaContent.title },
+        { name: "description", content: metaContent.meta.description },
+      ],
+    };
+  },
+});
+```
+
+> Si un `head` lit plusieurs dictionnaires, résolvez-les avec `Promise.all` : attendre chaque `getIntlayerAsync` sur sa propre ligne chaîne les requêtes au lieu de les exécuter en parallèle.
+
+Le compromis : l'import dynamique est résolu pendant l'exécution de `head`, sur le chemin critique du rendu du document. Sur une route froide, cela retarde le head de quelques millisecondes et peut légèrement dégrader le **LCP**.
+
+</Tab>
+
+<Tab label="Résolution dynamique en cache" value="cached">
+
+Résolvez le dictionnaire dans le `loader` de la route et relisez-le depuis `loaderData` dans `head`. Les loaders des routes correspondantes s'exécutent en parallèle, et `staleTime: Infinity` indique à TanStack Router que le résultat ne devient jamais obsolète, donc le chunk par locale est résolu une fois et servi à partir du cache du routeur après, laissant `head` synchrone.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  defaultLocale,
+  getIntlayerAsync,
+  getLocalizedUrl,
+  localeMap,
+} from "intlayer";
+
+export const Route = createFileRoute("/{-$locale}/")({
+  component: RouteComponent,
+  // Résolu en parallèle avec les autres routes correspondantes, hors du chemin critique du head
+  loader: async ({ params }) => {
+    const { locale = defaultLocale } = params;
+
+    return { metaContent: await getIntlayerAsync("app", locale) };
+  },
+  // Le dictionnaire ne change jamais pour une locale donnée : résoudre le chunk une fois
+  staleTime: Infinity,
+  head: ({ params, loaderData }) => {
+    const { locale = defaultLocale } = params;
+    const path = "/"; // Le chemin pour cette route
+
+    return {
+      links: [
+        // Lien canonique : Points vers la page localisée actuelle
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+
+        // Hreflang : Indiquer à Google toutes les versions localisées
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+
+        // x-default : Pour les utilisateurs dans les langues non correspondantes
+        // Définir la locale de secours par défaut (généralement votre langue principale)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
+      meta: [
+        { title: loaderData?.metaContent.title },
+        {
+          name: "description",
+          content: loaderData?.metaContent.meta.description,
+        },
+      ],
+    };
+  },
+});
+```
+
+> `head` peut être appelé avant que le loader ne se termine, donc `loaderData` est typé comme possiblement `undefined`. Conservez le chaînage optionnel, ou retournez un titre de secours.
+
+Vous conservez le chunk par locale sans payer son coût sur le chemin critique du head. Le prix est l'expérience développeur : le contenu doit être transmis explicitement du loader au `head` via `loaderData`.
+
+</Tab>
+
+</Tabs>
+
+### Quelle résolution choisir ?
+
+|                        | Résolution statique   | Résolution dynamique       | Résolution dynamique en cache          |
+| ---------------------- | --------------------- | -------------------------- | -------------------------------------- |
+| API                    | `getIntlayer`         | `getIntlayerAsync` (v9.4+) | `getIntlayerAsync` in `loader` (v9.4+) |
+| Signature `head`       | synchrone             | `async`                    | synchrone, lit `loaderData`            |
+| Locales livrées        | toute locale déclarée | locale demandée uniquement | locale demandée uniquement             |
+| Navigations client     | rien à résoudre       | relancé à chaque match     | servi depuis le cache du routeur       |
+| Expérience développeur | la plus simple        | un `await`                 | contenu transmis via `loaderData`      |
+
 ---
 
 </Step>
 
 <Step number={13} title="Récupérer la locale dans vos server actions">
 
-Vous pouvez vouloir accéder à la locale actuelle depuis l'intérieur de vos server actions ou de vos points de terminaison d'API.
-Vous pouvez le faire en utilisant l'utilitaire `getLocale` d'Intlayer.
+Vous voudrez peut-être accéder à la locale actuelle depuis vos server actions ou endpoints API.
+Vous pouvez le faire en utilisant l'helper `getLocale` de `intlayer`.
 
-Voici un exemple utilisant les fonctions serveur de TanStack Start :
+Voici un exemple utilisant les server functions de TanStack Start :
 
 ```tsx fileName="src/routes/{-$locale}/index.tsx"
 import { createServerFn } from "@tanstack/react-start";
@@ -751,18 +905,18 @@ import { getCookie, getIntlayer, getLocale } from "intlayer";
 
 export const getLocaleServer = createServerFn().handler(async () => {
   const locale = await getLocale({
-    // Récupérer le cookie de la requête (par défaut : 'INTLAYER_LOCALE')
+    // Obtenez le cookie de la requête (par défaut : 'INTLAYER_LOCALE')
     getCookie: (name) => {
       const cookieString = getRequestHeader("cookie");
 
       return getCookie(name, cookieString);
     },
-    // Récupérer le header de la requête (par défaut : 'x-intlayer-locale')
-    // Fallback utilisant la négociation Accept-Language
+    // Obtenez l'en-tête de la requête (par défaut : 'x-intlayer-locale')
+    // Secours utilisant la négociation Accept-Language
     getHeader: (name) => getRequestHeader(name),
   });
 
-  // Récupérer du contenu en utilisant getIntlayer()
+  // Récupérez du contenu en utilisant getIntlayerAsync()
   const content = getIntlayer("app", locale);
 
   return { locale, content };
@@ -775,79 +929,129 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 <Step number={14} title="Gérer les pages non trouvées">
 
-Lorsqu'un utilisateur visite une page inexistante, vous pouvez afficher une page 404 personnalisée et le préfixe de locale peut impacter la façon dont la page 404 est déclenchée.
+Lorsqu'un utilisateur visite une page inexistante, vous pouvez afficher une page personnalisée non trouvée et le préfixe de locale peut impacter la façon dont la page non trouvée est déclenchée.
 
-#### Comprendre la gestion 404 de TanStack Router avec les préfixes de locale
+#### Page d'accueil localisée
 
-Dans TanStack Router, la gestion des pages 404 avec des routes localisées nécessite une approche à plusieurs niveaux :
+> ```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)}" />
+> ```
 
-1. **Route 404 dédiée** : Une route spécifique pour afficher l'UI 404
-2. **Validation au niveau de la route** : Valide les préfixes de locale et redirige les invalides vers 404
-3. **Route fourre-tout (catch-all)** : Capture tous les chemins non correspondants au sein du segment de locale
+> Pour en savoir plus sur le hook `useIntlayer`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useIntlayer.md).
 
-```tsx fileName="src/routes/{-$locale}/404.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+</Step>
 
-// Ceci crée une route dédiée /[locale]/404
-// Elle est utilisée à la fois comme route directe et importée comme composant dans d'autres fichiers
-export const Route = createFileRoute("/{-$locale}/404")({
-  component: NotFoundComponent,
-});
+```tsx fileName="src/components/locale-switcher.tsx"
+import { useLocation } from "@tanstack/react-router";
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getPathWithoutLocale,
+  getPrefix,
+  Locales,
+} from "intlayer";
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+import { LocalizedLink, type To } from "./localized-link";
+
+export const LocaleSwitcher: FC = () => {
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale, setLocale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
 
-// Exporté séparément pour pouvoir être réutilisé dans notFoundComponent et les routes catch-all
-export function NotFoundComponent() {
   return (
-    <div>
-      <h1>404</h1>
-    </div>
+    <ol>
+      {availableLocales.map((localeEl) => (
+        <li key={localeEl}>
+          <LocalizedLink
+            aria-current={localeEl === locale ? "page" : undefined}
+            onClick={() => setLocale(localeEl)}
+            params={{ locale: getPrefix(localeEl).localePrefix }}
+            to={pathWithoutLocale as To}
+          >
+            <span>
+              {/* Locale - ex: FR */}
+              {localeEl}
+            </span>
+            <span>
+              {/* Langue dans sa propre locale - ex: Français */}
+              {getLocaleName(localeEl, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
+              {/* Langue dans la locale actuelle - ex: Francés avec la locale actuelle définie sur Locales.SPANISH */}
+              {getLocaleName(localeEl)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Langue en anglais - ex: French */}
+              {getLocaleName(localeEl, Locales.ENGLISH)}
+            </span>
+          </LocalizedLink>
+        </li>
+      ))}
+    </ol>
   );
-}
+};
 ```
 
-```tsx fileName="src/routes/{-$locale}/route.tsx"
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
-import { validatePrefix } from "intlayer";
-import { NotFoundComponent } from "./404";
+> Pour en savoir plus sur le hook `useLocale`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.md).
 
-export const Route = createFileRoute("/{-$locale}")({
-  // beforeLoad s'exécute avant que la route ne soit rendue (sur le serveur et le client)
-  // C'est l'endroit idéal pour valider le préfixe de locale
-  beforeLoad: ({ params }) => {
-    const localeParam = params.locale;
+</Step>
 
-    // validatePrefix vérifie si la locale est valide selon votre configuration intlayer
-    const { isValid, localePrefix } = validatePrefix(localeParam);
+<Step number={10} title="Gestion des attributs HTML">
 
-    if (!isValid) {
-      // Préfixe de locale invalide - rediriger vers la page 404 avec un préfixe de locale valide
-      throw redirect({
-        to: "/{-$locale}/404",
-        params: { locale: localePrefix },
-      });
-    }
-  },
-  component: Outlet,
-  // notFoundComponent est appelé lorsqu'une route enfant n'existe pas
-  // ex: /en/page-inexistante déclenche cela au sein du layout /en
-  notFoundComponent: NotFoundComponent,
-});
-```
+return (
+<html dir={getHTMLTextDir(locale)} lang={locale}>
+{/* ... _/}
+</html>
+);
+} {/_ ... */}
+</html>
+);
+}
 
-```tsx fileName="src/routes/{-$locale}/$.tsx"
-import { createFileRoute } from "@tanstack/react-router";
+export const Route = createFileRoute("/{-$locale}/")({
+component: RouteComponent,
+head: async ({ params }) => {
+const { locale = defaultLocale } = params;
+const path = "/"; // The path for this route
 
-import { NotFoundComponent } from "./404";
+    const metaContent = await getIntlayerAsync("app", locale);
+
+````
+
+> Si un `head` lit plusieurs dictionnaires, résolvez-les avec `Promise.all` : attendre chaque `getIntlayerAsync` sur sa propre ligne enchaîne les requêtes au lieu de les exécuter en parallèle.
 
-// La route $ (splat/catch-all) correspond à tout chemin qui ne correspond pas aux autres routes
-// ex: /en/certains/chemins/tres/profonds/invalides
-// Cela garantit que TOUS les chemins non correspondants au sein d'une locale affichent la page 404
-// Sans cela, les chemins profonds non correspondants pourraient afficher une page vide ou une erreur
-export const Route = createFileRoute("/{-$locale}/$")({
-  component: NotFoundComponent,
+Le compromis : l'import dynamique est résolu pendant l'exécution de `head`, sur le chemin critique du rendu du document. Sur une route froide, cela retarde le `head` de quelques millisecondes et peut légèrement dégrader le **LCP**.
+
+</Tab>
+
+<Tab label="Résolution dynamique mise en cache" value="cached">
+
+Résolvez le dictionnaire dans le `loader` de la route, puis relisez-le depuis `loaderData` dans `head`. Les loaders des routes correspondantes s'exécutent en parallèle, et `staleTime: Infinity` indique à TanStack Router que le résultat ne périme jamais, le chunk par locale n'est donc résolu qu'une fois, puis servi depuis le cache du routeur, ce qui laisse `head` synchrone.
+
+```tsx fileName="src/routes/{-$locale}/index.tsx"
+
+<Tabs>
+ <Tab value='Extract command'>
+
+  return { locale, content };
 });
+import { createFileRoute } from "@tanstack/react-router";
+
+````
+
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+
 ```
 
----
+```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { NotFoundComponent } from "./404";
+```
 
 </Step>
 
@@ -862,24 +1066,11 @@ Pour le configurer, vous pouvez ajouter une section `compiler` dans votre fichie
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
-const config: IntlayerConfig = {
-  // ... Reste de votre configuration
-  compiler: {
-    /**
-     * Indique si le compilateur doit être activé.
-     */
-    enabled: true,
-
     /**
      * Définit le chemin des fichiers de sortie
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
-    /**
-     * Indique si les composants doivent être sauvegardés après avoir été transformés. De cette façon, le compilateur peut être exécuté une seule fois pour transformer l'application, puis il peut être supprimé.
-     */
-    saveComponents: false,
-
     /**
      * Préfixe de clé de dictionnaire
      */
@@ -896,29 +1087,23 @@ export default config;
 Exécutez l'extracteur pour transformer vos composants et extraire le contenu
 
 ```bash packageManager="npm"
-npx intlayer extract
+
 ```
 
 ```bash packageManager="pnpm"
-pnpm intlayer extract
+
 ```
 
 ```bash packageManager="yarn"
-yarn intlayer extract
-```
 
-```bash packageManager="bun"
-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="bun"
 
-Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
+</Tab>
+</Tabs>
 
-```ts fileName="vite.config.ts"
+bun x intlayer extract
 import { defineConfig } from "vite";
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 
@@ -943,25 +1128,10 @@ yarn build # Ou yarn dev
 ```
 
 ```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
 
 ---
 
-</Step>
-
-<Step number={16} title="Générer un Sitemap">
-
-Intlayer est livré avec un générateur de sitemap intégré pour vous aider à créer facilement un sitemap pour votre application. Il gère les routes localisées et ajoute les métadonnées nécessaires pour les moteurs de recherche.
-
-> Le sitemap généré par Intlayer prend en charge l'espace de noms `xhtml:link` (Hreflang XML Extensions). Contrairement aux générateurs de sitemap par défaut qui ne répertorient que les URL brutes, Intlayer crée automatiquement les liens bidirectionnels requis entre toutes les versions linguistiques d'une page (par exemple, `/about`, `/about?lang=fr` et `/about?lang=es`). Cela garantit que les moteurs de recherche indexent et servent correctement la bonne version linguistique au bon public.
-
-Pour l'utiliser, vous devez d'abord configurer votre fichier `vite.config.ts` pour activer le pré-rendu de vos routes localisées et désactiver la génération de sitemap par défaut de TanStack Start.
-
-```typescript fileName="vite.config.ts"
+bun run build # Or bun run dev
 import { localeFlatMap } from "intlayer";
 // ... autres imports
 
@@ -997,13 +1167,9 @@ export default defineConfig({
 
 Ensuite, créez une route `src/routes/sitemap[.]xml.ts` qui utilise la fonction `generateSitemap` :
 
-```typescript fileName="src/routes/sitemap[.]xml.ts"
-import { createFileRoute } from "@tanstack/react-router";
-import { generateSitemap } from "intlayer";
+````typescript fileName="src/routes/sitemap[.]xml.ts"
 
-const SITE_URL = (
-  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
-).replace(/\/$/, "");
+---
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1024,19 +1190,6 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
-```
-
----
-
-</Step>
-
-<Step number={17} title="Configurer TypeScript">
-
-Intlayer utilise l'augmentation de module pour bénéficier des avantages de TypeScript et rendre votre codebase plus robuste.
-
-Assurez-vous que votre configuration TypeScript inclut les types autogénérés :
-
-```json5 fileName="tsconfig.json"
 {
   // ... vos configurations existantes
   include: [
@@ -1044,24 +1197,17 @@ Assurez-vous que votre configuration TypeScript inclut les types autogénérés
     ".intlayer/**/*.ts", // Inclure les types auto-générés
   ],
 }
-```
-
----
-
-</Step>
-
-</Steps>
 
 ### Configuration 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.
+Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les valider dans votre référentiel 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
-```
+````
 
 ---
 
@@ -1069,16 +1215,16 @@ Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `
 
 Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
 
-[Installer depuis le VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Installer depuis la VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 Cette extension fournit :
 
 - **Autocomplétion** pour les clés de traduction.
 - **Détection d'erreurs en temps réel** pour les traductions manquantes.
-- **Aperçus en ligne** du contenu traduit.
+- **Aperçus intégrés** du contenu traduit.
 - **Actions rapides** pour créer et mettre à jour facilement les traductions.
 
-Pour plus de détails sur l'utilisation de l'extension, reportez-vous à la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+Pour plus de détails sur l'utilisation de l'extension, consultez la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
@@ -1088,11 +1234,11 @@ Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://githu
 
 ---
 
-## Références de documentation
+## Références de Documentation
 
 - [Documentation Intlayer](https://intlayer.org)
 - [Documentation Tanstack Start](https://reactrouter.com/)
 - [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)
+- [Content Declaration](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)