@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/fr/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Comment traduire une application Tanstack Start en utilisant Solid.js en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre application Tanstack Start en utilisant Intlayer et Solid.js. Suivez ce guide complet pour rendre votre application multilingue avec un routage tenant compte de la localisation.
+updatedAt: 2026-05-31
+title: "TanStack Start + Solid i18n - Guide complet pour traduire votre application"
+description: "Oubliez i18next. Le guide 2026 pour créer une application TanStack Start + Solid multilingue (i18n). Traduisez avec des agents IA et optimisez la taille du bundle, le SEO et les performances."
 keywords:
   - Internationalisation
   - Documentation
@@ -38,17 +38,54 @@ history:
 
 Ce guide démontre comment intégrer **Intlayer** pour une internationalisation fluide dans les projets Tanstack Start avec Solid.js, le routage tenant compte de la localisation, le support TypeScript et les pratiques de développement modernes.
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+Par rapport aux solutions principales telles que `react-i18next` ou `i18next`, Intlayer est une solution dotée d'optimisations intégrées telles que :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
 
-- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamique de langue.
-- **Activer le routage tenant compte de la localisation** avec le système de routage basé sur les fichiers de Tanstack Start.
+<Accordion header="Support complet de TanStack Start">
+
+Intlayer est optimisé pour fonctionner parfaitement avec TanStack Start et Solid en offrant un **routage multilingue**, un **plan du site** et toutes les fonctionnalités nécessaires à la mise à l'échelle de l'internationalisation (i18n).
+
+</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.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -86,11 +123,15 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) sur GitHub.
 
-### Étape 1 : Créer le projet
+<Steps>
+
+<Step number={1} title="Créer le projet">
 
 Commencez par créer un nouveau projet TanStack Start en suivant le guide [Démarrer un nouveau projet](https://tanstack.com/start/latest/docs/framework/solid/quick-start) sur le site web de TanStack Start.
 
-### Étape 2 : Installer les packages Intlayer
+</Step>
+
+<Step number={2} title="Installer les packages Intlayer">
 
 Installez les packages nécessaires en utilisant votre gestionnaire de paquets préféré :
 
@@ -128,7 +169,9 @@ bun x intlayer init
 - **vite-intlayer**
   Inclut le plugin Vite pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la langue préférée de l'utilisateur, gérer les cookies et gérer la redirection d'URL.
 
-### Étape 3 : Configuration de votre projet
+</Step>
+
+<Step number={3} title="Configuration de votre projet">
 
 Créez un fichier de configuration pour configurer les langues de votre application :
 
@@ -149,7 +192,9 @@ export default config;
 
 > Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, la redirection du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 4 : Intégrer Intlayer dans votre configuration Vite
+</Step>
+
+<Step number={4} title="Intégrer Intlayer dans votre configuration Vite">
 
 Ajoutez le plugin intlayer dans votre configuration :
 
@@ -177,7 +222,9 @@ export default defineConfig({
 
 > Le plugin Vite `intlayer()` est utilisé pour intégrer Intlayer avec Vite. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.
 
-### Étape 5 : Créer l'affichage racine (Root Layout)
+</Step>
+
+<Step number={5} title="Créer l'affichage racine">
 
 Configurez votre affichage racine pour supporter l'internationalisation en utilisant `useParams` pour détecter la langue actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
 
@@ -218,7 +265,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Étape 6 : Créer la mise en page de la langue (Optionnel)
+</Step>
+
+<Step number={6} title="Créer la mise en page de la langue">
 
 Créez une mise en page qui gère le préfixe de la langue et effectue la validation. Cette mise en page garantira que seules les langues valides sont traitées.
 
@@ -253,7 +302,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Pour le mode `'prefix-all'`, vous préférerez peut-être remplacer le segment par `$locale`.
 > Pour le mode `'no-prefix'` ou `'search-params'`, vous pouvez supprimer complètement le segment.
 
-### Étape 7 : Déclarer votre contenu
+</Step>
+
+<Step number={7} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker les traductions :
 
@@ -299,7 +350,9 @@ export default appContent;
 
 > Pour plus de détails, reportez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
-### Étape 8 : Créer des composants et des hooks tenant compte de la langue
+</Step>
+
+<Step number={8} title="Créer des composants et des hooks tenant compte de la langue">
 
 Créez un composant `LocalizedLink` pour une navigation tenant compte de la langue :
 
@@ -378,7 +431,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Étape 9 : Utiliser Intlayer dans vos pages
+</Step>
+
+<Step number={9} title="Utiliser Intlayer dans vos pages">
 
 Accédez à vos dictionnaires de contenu partout dans votre application :
 
@@ -421,7 +476,9 @@ function RouteComponent() {
 
 > Pour en savoir plus sur le hook `useIntlayer`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/solid-intlayer/useIntlayer.md).
 
-### Étape 10 : Créer un composant de changement de langue (Locale Switcher)
+</Step>
+
+<Step number={10} title="Créer un composant de changement de langue">
 
 Créez un composant pour permettre aux utilisateurs de changer de langue :
 
@@ -465,7 +522,9 @@ export default LocaleSwitcher;
 >
 > Pour en savoir plus sur le hook `useLocale`, reportez-vous à la [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/packages/solid-intlayer/useLocale.md).
 
-### Étape 11 : Gestion des attributs HTML
+</Step>
+
+<Step number={11} title="Gestion des attributs HTML">
 
 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.
 
@@ -484,7 +543,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Étape 12 : Ajouter un middleware (Optionnel)
+</Step>
+
+<Step number={12} title="Ajouter un middleware">
 
 Vous pouvez également utiliser `intlayerProxy` pour ajouter un routage côté serveur à votre application. Ce plugin détectera automatiquement la langue actuelle en fonction de l'URL et définira le cookie de langue approprié. Si aucune langue n'est spécifiée, le plugin déterminera la langue la plus appropriée en fonction des préférences linguistiques du navigateur de l'utilisateur. Si aucune langue n'est détectée, il redirigera vers la langue par défaut.
 
@@ -515,7 +576,9 @@ export default defineConfig({
 
 ---
 
-### Étape 13 : Internationaliser vos métadonnées (Optionnel)
+</Step>
+
+<Step number={13} title="Internationaliser vos métadonnées">
 
 Vous pouvez également utiliser la fonction `getIntlayer` pour accéder à vos dictionnaires de contenu à l'intérieur du chargeur `head` pour des métadonnées tenant compte de la localisation :
 
@@ -562,7 +625,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Étape 13 : Récupérer la langue dans vos actions serveur (Optionnel)
+</Step>
+
+<Step number={13} title="Récupérer la langue dans vos actions serveur">
 
 Vous voudrez peut-être accéder à la langue actuelle depuis vos actions serveur ou vos points de terminaison d'API.
 Vous pouvez le faire en utilisant l'utilitaire `getLocale` d'`intlayer`.
@@ -599,7 +664,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Étape 14 : Gérer les pages non trouvées (Optionnel)
+</Step>
+
+<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 langue peut impacter la manière dont la page non trouvée est déclenchée.
 
@@ -673,7 +740,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Optionnel) Étape 15 : Extraire le contenu de vos composants
+</Step>
+
+<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 du temps.
 
@@ -786,7 +855,9 @@ bun run build # Ou bun run dev
 
 ---
 
-### Étape 16 : Générer un Sitemap (Optionnel)
+</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.
 
@@ -859,7 +930,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Étape 17 : Configurer TypeScript (Optionnel)
+</Step>
+
+<Step number={17} title="Configurer TypeScript">
 
 Intlayer utilise l'augmentation de module pour bénéficier des avantages de TypeScript et rendre votre base de code plus robuste.
 
@@ -877,6 +950,10 @@ Assurez-vous que votre configuration TypeScript inclut les types autogé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 commettre dans votre dépôt Git.

package/docs/fr/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Comment traduire une application Tanstack Start en 2026
-description: Apprenez à ajouter l'internationalisation (i18n) à votre application Tanstack Start en utilisant Intlayer. Suivez ce guide complet pour rendre votre application multilingue avec un routage tenant compte de la locale.
+updatedAt: 2026-05-31
+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:
   - Internationalisation
   - Documentation
@@ -55,17 +55,54 @@ history:
 
 Ce guide montre comment intégrer **Intlayer** pour une internationalisation transparente dans les projets Tanstack Start avec un routage tenant compte de la locale, un support TypeScript et des pratiques de développement modernes.
 
-## Qu'est-ce qu'Intlayer ?
+## Pourquoi Intlayer plutôt que des alternatives ?
 
-**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier le support multilingue dans les applications web modernes.
+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 :
 
-Avec Intlayer, vous pouvez :
+<AccordionGroup>
 
-- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
-- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
-- **Assurer le support TypeScript** avec des types autogénérés, améliorant l'autocomplétion et la détection d'erreurs.
-- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamique de locale.
-- **Permettre un routage tenant compte de la locale** avec le système de routage basé sur des fichiers de Tanstack Start.
+<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).
+
+</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.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -103,11 +140,15 @@ Avec Intlayer, vous pouvez :
 
 Voir le [Modèle d'Application](https://github.com/aymericzip/intlayer-tanstack-start-template) sur GitHub.
 
-### Étape 1 : Créer le projet
+<Steps>
+
+<Step number={1} title="Créer le projet">
 
 Commencez par créer un nouveau projet TanStack Start en suivant le guide [Démarrer un nouveau projet](https://tanstack.com/start/latest/docs/framework/react/quick-start) sur le site de TanStack Start.
 
-### Étape 2 : Installer les paquets Intlayer
+</Step>
+
+<Step number={2} title="Installer les paquets Intlayer">
 
 Installez les paquets nécessaires en utilisant votre gestionnaire de paquets préféré :
 
@@ -145,7 +186,9 @@ bun x intlayer init
 - **vite-intlayer**
   Comprend le plugin Vite pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi qu'un middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et gérer la redirection d'URL.
 
-### Étape 3 : Configuration de votre projet
+</Step>
+
+<Step number={3} title="Configuration de votre projet">
 
 Créez un fichier de configuration pour configurer les langues de votre application :
 
@@ -166,7 +209,9 @@ export default config;
 
 > Via ce fichier de configuration, vous pouvez configurer les URL localisées, la redirection du middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et plus encore. Pour une liste complète des paramètres disponibles, reportez-vous à la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
 
-### Étape 4 : Intégrer Intlayer dans votre configuration Vite
+</Step>
+
+<Step number={4} title="Intégrer Intlayer dans votre configuration Vite">
 
 Ajoutez le plugin intlayer dans votre configuration :
 
@@ -196,7 +241,9 @@ export default config;
 
 > Le plugin Vite `intlayer()` est utilisé pour intégrer Intlayer avec Vite. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Vite. De plus, il fournit des alias pour optimiser les performances.
 
-### Étape 5 : Créer le Layout Racine
+</Step>
+
+<Step number={5} title="Créer le Layout Racine">
 
 Configurez votre layout racine pour supporter l'internationalisation en utilisant `useParams` pour détecter la locale actuelle et en définissant les attributs `lang` et `dir` sur la balise `html`.
 
@@ -248,7 +295,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
-### Étape 6 : Créer le Layout de Locale
+</Step>
+
+<Step number={6} title="Créer le Layout de Locale">
 
 Créez un layout qui gère le préfixe de locale et effectue la validation.
 
@@ -280,7 +329,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Pour le mode `'prefix-all'`, vous préférerez peut-être passer le slot en `$locale` à la place.
 > Pour les modes `'no-prefix'` ou `'search-params'`, vous pouvez supprimer complètement le slot.
 
-### Étape 7 : Déclarer votre contenu
+</Step>
+
+<Step number={7} title="Déclarer votre contenu">
 
 Créez et gérez vos déclarations de contenu pour stocker les traductions :
 
@@ -326,7 +377,9 @@ export default appContent;
 
 > Pour plus de détails, reportez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/content_file.md).
 
-### Étape 7 : Créer des composants et hooks tenant compte de la locale
+</Step>
+
+<Step number={7} title="Créer des composants et hooks tenant compte de la locale">
 
 Créez un composant `LocalizedLink` pour une navigation tenant compte de la locale :
 
@@ -430,7 +483,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Étape 8 : Utiliser Intlayer dans vos pages
+</Step>
+
+<Step number={8} title="Utiliser Intlayer dans vos pages">
 
 Accédez à vos dictionnaires de contenu dans toute votre application :
 
@@ -486,7 +541,9 @@ function RouteComponent() {
 
 > 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).
 
-### Étape 9 : Créer un composant sélecteur de langue
+</Step>
+
+<Step number={9} title="Créer un composant sélecteur de langue">
 
 Créez un composant pour permettre aux utilisateurs de changer de langue :
 
@@ -547,7 +604,9 @@ 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).
 
-### Étape 10 : Gestion des attributs HTML
+</Step>
+
+<Step number={10} title="Gestion des attributs HTML">
 
 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.
 
@@ -566,7 +625,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Étape 11 : Ajouter un middleware (Optionnel)
+</Step>
+
+<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.
 
@@ -597,7 +658,9 @@ export default defineConfig({
 
 ---
 
-### Étape 12 : Internationaliser vos métadonnées (Optionnel)
+</Step>
+
+<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 :
 
@@ -644,7 +707,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Étape 13 : Récupérer la locale dans vos server actions (Optionnel)
+</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.
@@ -681,7 +746,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Étape 14 : Gérer les pages non trouvées (Optionnel)
+</Step>
+
+<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.
 
@@ -757,7 +824,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### (Optionnel) Étape 15 : Extraer le contenu de vos composants
+</Step>
+
+<Step number={15} title="Extracter 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.
 
@@ -855,7 +924,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Étape 16 : Générer un Sitemap (Optionnel)
+</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.
 
@@ -930,7 +1001,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Étape 17 : Configurer TypeScript (Optionnel)
+</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.
 
@@ -948,6 +1021,10 @@ Assurez-vous que votre configuration TypeScript inclut les types autogé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.