@intlayer/docs 9.4.1 → 9.4.3

package/docs/fr/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-08-25
+updatedAt: 2026-08-30
 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:
@@ -64,7 +64,6 @@ Ce guide montre comment intégrer **Intlayer** pour une internationalisation tra
 Par rapport aux solutions principales telles que `react-i18next` ou `next-intl`, ou `paraglide`, Intlayer est une solution qui vient avec des optimisations intégrées telles que :
 
 <AccordionGroup>
-
 <Accordion header="Support complet de TanStack Start">
 
 Intlayer est entièrement optimisé pour TanStack Start, offrant un **routage multilingue**, la **gestion des cookies**, la **génération de sitemap**, le **chargement dynamique de contenu** et toutes les fonctionnalités nécessaires pour mettre à l'échelle votre internationalisation (i18n).
@@ -161,15 +160,15 @@ npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer@canary init --interactive
+pnpm dlx intlayer init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer@canary init --interactive
+yarn dlx intlayer init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer@canary init --interactive
+bunx intlayer init --interactive
 ```
 
 > l'indicateur `--interactive` est facultatif. Utilisez `intlayer-cli init` si vous êtes un agent IA.
@@ -651,8 +650,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
----
-
 </Step>
 
 <Step number={11} title="Ajouter un middleware">
@@ -689,8 +686,6 @@ export default defineConfig({
 });
 ```
 
----
-
 </Step>
 
 <Step number={12} title="Internationaliser vos métadonnées">
@@ -884,8 +879,6 @@ Vous conservez le chunk par locale sans payer son coût sur le chemin critique d
 | 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">
@@ -923,139 +916,85 @@ export const getLocaleServer = createServerFn().handler(async () => {
 });
 ```
 
----
-
 </Step>
 
 <Step number={14} title="Gérer les pages non trouvées">
 
-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.
-
-#### Page d'accueil localisée
-
-> ```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).
-
-</Step>
+Lorsqu'un utilisateur visite une page inexistante, vous pouvez afficher une page 404 personnalisée, et le préfixe de locale peut influencer la manière dont la page non trouvée est déclenchée.
 
-```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";
+#### Comprendre la gestion des 404 de TanStack Router avec les préfixes de locale
 
-import { LocalizedLink, type To } from "./localized-link";
+Dans TanStack Router, la gestion des pages 404 avec des routes localisées nécessite une approche à plusieurs niveaux :
 
-export const LocaleSwitcher: FC = () => {
-  const { pathname } = useLocation();
+1. **Route 404 dédiée** : Une route spécifique pour afficher l'interface utilisateur 404
+2. **Validation au niveau de la route** : Valide les préfixes de locale et redirige ceux qui sont invalides vers la page 404
+3. **Route catch-all** : Capture tous les chemins non correspondants dans le segment de la locale
 
-  const { availableLocales, locale, setLocale } = useLocale();
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
 
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
+// 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,
+});
 
+// Exporté séparément pour pouvoir être réutilisé dans notFoundComponent et les routes catch-all
+export function NotFoundComponent() {
   return (
-    <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>
+    <div>
+      <h1>404</h1>
+    </div>
   );
-};
-```
-
-> 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).
-
-</Step>
-
-<Step number={10} title="Gestion des attributs HTML">
-
-return (
-<html dir={getHTMLTextDir(locale)} lang={locale}>
-{/* ... _/}
-</html>
-);
-} {/_ ... */}
-</html>
-);
 }
+```
 
-export const Route = createFileRoute("/{-$locale}/")({
-component: RouteComponent,
-head: async ({ params }) => {
-const { locale = defaultLocale } = params;
-const path = "/"; // The path for this route
-
-    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.
-
-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}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { NotFoundComponent } from "./404";
 
-```tsx fileName="src/routes/{-$locale}/index.tsx"
+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;
 
-<Tabs>
- <Tab value='Extract command'>
+    // validatePrefix vérifie si la locale est valide selon votre configuration intlayer
+    const { isValid, localePrefix } = validatePrefix(localeParam);
 
-  return { locale, content };
+    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: /fr/page-inexistante déclenche cela au sein du layout /fr
+  notFoundComponent: NotFoundComponent,
 });
-import { createFileRoute } from "@tanstack/react-router";
-
-````
-
-```tsx fileName="src/routes/{-$locale}/route.tsx"
-
 ```
 
 ```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
 import { NotFoundComponent } from "./404";
+
+// La route $ (splat/catch-all) correspond à tout chemin qui ne correspond pas aux autres routes
+// ex: /fr/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,
+});
 ```
 
 </Step>
 
-<Step number={15} title="Extracter le contenu de vos composants" isOptional={true}>
+<Step number={15} 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.
 
@@ -1066,11 +1005,28 @@ 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.
+     *
+     * - Si `true`, le compilateur réécrira le fichier du composant sur le disque. La transformation sera donc permanente, et le compilateur sautera la transformation pour le prochain processus. De cette façon, le compilateur peut transformer l'application, puis il peut être supprimé.
+     *
+     * - Si `false`, le compilateur injectera l'appel de fonction `useIntlayer()` dans le code dans la sortie de build uniquement, et gardera la base de code intacte. La transformation sera effectuée uniquement en mémoire.
+     */
+    saveComponents: false,
+
     /**
      * Préfixe de clé de dictionnaire
      */
@@ -1082,35 +1038,41 @@ 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
 
 ```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>
-</Tabs>
+ </Tab>
+ <Tab value="Compilateur Babel">
 
-bun x intlayer extract
+> Depuis la v9, `intlayerCompiler` est inclus dans le plugin `intlayer`. Vous n'avez donc pas besoin de l'ajouter manuellement.
+
+Mettez à jour votre fichier `vite.config.ts` pour inclure le plugin `intlayerCompiler` :
+
+```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer, intlayerCompiler } from "vite-intlayer";
 
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    intlayerCompiler(), // Ajoute le plugin du compilateur
   ],
 });
 ```
@@ -1128,10 +1090,23 @@ yarn build # Ou yarn dev
 ```
 
 ```bash packageManager="bun"
+bun run build # Ou bun run dev
+```
 
----
+ </Tab>
+</Tabs>
+
+</Step>
+
+<Step number={16} title="Pré-rendre & Générer le Sitemap">
 
-bun run build # Or bun run dev
+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"
 import { localeFlatMap } from "intlayer";
 // ... autres imports
 
@@ -1167,9 +1142,13 @@ 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"
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
 
----
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1190,6 +1169,17 @@ 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: [
@@ -1197,6 +1187,11 @@ export const Route = createFileRoute("/sitemap.xml")({
     ".intlayer/**/*.ts", // Inclure les types auto-générés
   ],
 }
+```
+
+</Step>
+
+</Steps>
 
 ### Configuration Git
 
@@ -1207,7 +1202,7 @@ Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `
 ```plaintext fileName=".gitignore"
 # Ignorer les fichiers générés par Intlayer
 .intlayer
-````
+```
 
 ---
 
@@ -1242,3 +1237,115 @@ Pour aller plus loin, vous pouvez implémenter l'[éditeur visuel](https://githu
 - [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/react-intlayer/useLocale.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)
+
+## Questions fréquentes
+
+<FAQ>
+
+<Question title="Quelles sont les différentes solutions pour internationaliser une application TanStack Start ?">
+
+TanStack Start ne fournit aucune couche d'i18n propre, le choix est donc une bibliothèque :
+
+- **`i18next` / `react-i18next`** et **`react-intl`** : des catalogues de messages indépendants du framework, câblés manuellement dans le routeur.
+- **`Lingui`** : des messages ICU avec une étape de compilation.
+- **`Intlayer`** : contenu déclaré à côté de chaque composant et compilé au moment du build, avec des clés typées, un routage sensible à la locale, la génération de sitemap, la traduction par IA, un éditeur visuel et un CMS.
+
+La différence qui compte sur TanStack Start est le routage et le rendu serveur. Intlayer s'intègre au routeur basé sur les fichiers, à la fonction `head` et à la passe de prérendu, au lieu de vous laisser assembler un provider, un détecteur de locale et un sitemap à la main. Voir [pourquoi Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/interest_of_intlayer.md) et le [benchmark i18n TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="Quel poids l'i18n ajoute-t-elle à la taille de mon bundle TanStack Start ?">
+
+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. Le balisage rendu côté serveur résout son 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/tanstack.md).
+
+</Question>
+
+<Question title="Puis-je migrer depuis `react-i18next` ou `react-intl` sans réécrire mes composants ?">
+
+Oui, et il existe deux voies. Vous pouvez migrer le contenu progressivement avec le [guide de migration react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/migration_from_react-i18next_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 `react-i18next`, `react-intl` et `i18next`, 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 15 de ce guide le détaille.
+
+Pour un pipeline entièrement automatisé, le [compilateur Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/compiler.md) fait la même chose au moment du build : il analyse votre code source JSX, TSX, Vue et Svelte à chaque changement, génère les dictionnaires et les garde synchronisés via le remplacement de module à chaud, de sorte qu'il n'y a plus aucune clé à maintenir à la main.
+
+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 :
+
+- **[Extension VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/vs_code_extension.md)** : passez d'une clé `useIntlayer` au fichier de contenu qui la déclare, extrayez du contenu depuis un composant, et lancez build, fill, test, push et pull depuis la palette de commandes ou un onglet Intlayer dédié.
+- **[Serveur LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/lsp.md)** : la même connaissance dans tout éditeur qui parle LSP, avec aller à la définition, rechercher toutes les références, aperçus au survol d'une valeur traduite, autocomplétion des clés et des champs, et un avertissement lorsqu'une clé n'est déclarée nulle part. Il résout aussi les appels `i18next`, `react-i18next`, `next-intl` et `use-intl`, ce qui aide pendant la migration.
+- **[Serveur MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/mcp_server.md)** : expose la documentation et la CLI d'Intlayer à Cursor, VS Code, Claude Desktop, Claude Code et ChatGPT, afin qu'un assistant réponde à partir de la documentation actuelle au lieu de deviner, et puisse exécuter lui-même des commandes telles que `intlayer fill`.
+- **[Compétences d'agent](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/agent_skills.md)** : des compétences ciblées telles que `intlayer-config`, `intlayer-cli` et `intlayer-content`, plus une par framework, qui apprennent à un agent votre configuration de routage et les types de nœuds de contenu.
+- **[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 prend-il en charge le rendu côté serveur et le prérendu dans TanStack Start ?">
+
+Oui. Le contenu se résout pendant le SSR, et le guide couvre la configuration de prérendu qui émet un document statique par route localisée. L'étape 16 montre comment activer `prerender` dans `vite.config.ts` et générer un sitemap localisé à partir de la même table de routes.
+
+</Question>
+
+<Question title="Comment ajouter des balises hreflang et un sitemap localisé ?">
+
+Utilisez la fonction intégrée `generateSitemap` dans une route `src/routes/sitemap[.]xml.ts`. Contrairement à une simple liste d'URL, elle émet l'espace de noms `xhtml:link`, si bien que chaque version linguistique d'une page renvoie de manière bidirectionnelle vers les autres et que les moteurs de recherche indexent la bonne pour chaque public. Les métadonnées `head` localisées sont couvertes à l'étape 12.
+
+</Question>
+
+<Question title="Dois-je mettre la locale dans l'URL ?">
+
+Non. `routing.mode` contrôle le schéma d'URL : `"prefix-no-default"` (la valeur par défaut, `/about` et `/fr/about`), `"prefix-all"` (`/en/about`), `"no-prefix"` (résolue à partir d'un cookie, d'un en-tête ou d'un domaine) ou `"search-params"` (`/about?locale=fr`). Les locales peuvent aussi être associées à des domaines séparés avec `routing.domains`. Voir la [référence de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
+
+</Question>
+
+<Question title="Comment construire un sélecteur de langue qui conserve la route courante ?">
+
+Utilisez `useLocale` avec le composant de lien localisé décrit à l'étape 9. `useLocale` expose la locale active, les locales disponibles et un setter qui persiste le choix, tandis que `getLocalizedUrl` réécrit le chemin actuel dans la langue cible afin que l'utilisateur reste sur la même page au lieu d'atterrir sur la page d'accueil.
+
+</Question>
+
+<Question title="Comment gérer les pages 404 sur les routes localisées ?">
+
+L'étape 14 le couvre. `validatePrefix` vous indique si le segment de locale de l'URL est une locale déclarée, si bien que `/xx/about` renvoie un vrai 404 au lieu d'être traité comme un chemin. Sans lui, un préfixe inconnu se résout silencieusement et les moteurs de recherche indexent une page dupliquée.
+
+</Question>
+
+<Question title="Comment traduire une application TanStack Start automatiquement avec l'IA ?">
+
+Lancez `npx intlayer fill`. La CLI trouve les traductions manquantes et les remplit avec le LLM de votre choix, en utilisant votre propre fournisseur et votre clé d'API. Ajoutez `--git-diff` pour ne traduire que le contenu modifié sur la branche courante, ce qui garde les exécutions CI peu coûteuses. 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 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) et le [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/markdown.md) pour le texte long, avec des [formateurs](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/formatters.md) pour les nombres, les dates et les devises.
+
+</Question>
+
+<Question title="Comment les traducteurs peuvent-ils modifier le contenu sans toucher au code ?">
+
+Via l'[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md), qui tourne sur votre propre infrastructure et permet à quiconque de modifier le texte sur place sur le site en cours d'exécution, ou le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md), qui externalise le contenu afin qu'il puisse changer sans déploiement.
+
+</Question>
+
+<Question title="Intlayer est-il gratuit et open source ?">
+
+Oui, sous licence Apache 2.0, usage commercial inclus. Le CMS hébergé est un service payant optionnel qui peut aussi être [auto-hébergé](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/self_hosting.md).
+
+</Question>
+
+</FAQ>