@intlayer/docs 8.11.3 → 8.12.0

package/blog/es/i18n_using_next-intl.md

@@ -71,6 +71,7 @@ Antes de sumergirnos en la implementación, aquí hay algunas prácticas que deb
   title="Demo CodeSandbox - Cómo internacionalizar tu aplicación usando Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/next-intl-template) en GitHub.
 
@@ -106,7 +107,9 @@ Aquí está la estructura del proyecto que crearemos:
         └── ServerComponent.tsx
 ```
 
-### Paso 1: Instalar Dependencias
+<Steps>
+
+<Step number={1} title="Instalar Dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -124,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: La biblioteca principal de internacionalización para Next.js App Router que proporciona hooks, funciones del servidor y proveedores del cliente para gestionar las traducciones.
 
-### Paso 2: Configura tu Proyecto
+</Step>
+
+<Step number={2} title="Configura tu Proyecto">
 
 Crea un archivo de configuración que defina los locales soportados y configure la solicitud de next-intl. Este archivo sirve como la única fuente de verdad para tu configuración i18n y asegura la seguridad de tipos en toda tu aplicación.
 
@@ -209,7 +214,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Paso 3: Definir Rutas Dinámicas por Locales
+</Step>
+
+<Step number={3} title="Definir Rutas Dinámicas por Locales">
 
 Configura el enrutamiento dinámico para las locales creando un directorio `[locale]` en tu carpeta de la aplicación. Esto permite que Next.js maneje el enrutamiento basado en la localización donde cada locale se convierte en un segmento de la URL (por ejemplo, `/en/about`, `/fr/about`).
 
@@ -297,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### Paso 4: Crea tus archivos de traducción
+</Step>
+
+<Step number={4} title="Crea tus archivos de traducción">
 
 Crea archivos JSON para cada locale y namespace. Esta estructura te permite organizar las traducciones de manera lógica y cargar solo lo que necesitas para cada página.
 
@@ -339,7 +348,9 @@ Organizar las traducciones por namespace (por ejemplo, `common.json`, `about.jso
 }
 ```
 
-### Paso 5: Utiliza las Traducciones en Tus Páginas
+</Step>
+
+<Step number={5} title="Utiliza las Traducciones en Tus Páginas">
 
 Crea un componente de página que cargue las traducciones en el servidor y las pase tanto a los componentes del servidor como del cliente. Esto asegura que las traducciones se carguen antes de renderizar y previene el parpadeo de contenido.
 
@@ -390,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### Paso 6: Usar Traducciones en Componentes Cliente
+</Step>
+
+<Step number={6} title="Usar Traducciones en Componentes Cliente">
 
 Los componentes cliente pueden usar los hooks `useTranslations` y `useFormatter` para acceder a las traducciones y funciones de formato. Estos hooks leen del contexto `NextIntlClientProvider`.
 
@@ -426,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Paso 7: Usar traducciones en componentes del servidor
+</Step>
+
+<Step number={7} title="Usar traducciones en componentes del servidor">
 
 Los componentes del servidor no pueden usar hooks de React, por lo que reciben las traducciones y los formateadores a través de props desde sus componentes padres. Este enfoque mantiene los componentes del servidor síncronos y permite que se aniden dentro de componentes cliente.
 
@@ -458,9 +473,9 @@ const ServerComponent = ({
 
 > En tu página/layout, usa `getTranslations` y `getFormatter` de `next-intl/server` para precomputar traducciones y formatos, luego pásalos como props a los componentes del servidor.
 
----
+</Step>
 
-### (Opcional) Paso 8: Cambiar el idioma de tu contenido
+<Step number={8} title="Cambiar el idioma de tu contenido" isOptional={true}>
 
 Para cambiar el idioma de tu contenido con next-intl, renderiza enlaces conscientes del locale que apunten al mismo pathname mientras cambias el locale. El provider reescribe las URLs automáticamente, así que solo tienes que apuntar a la ruta actual.
 
@@ -532,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcional) Paso 9: Usar el componente Link localizado
+</Step>
+
+<Step number={9} title="Usar el componente Link localizado" isOptional={true}>
 
 `next-intl` proporciona un subpaquete `next-intl/navigation` que contiene un componente Link localizado que aplica automáticamente la locale activa. Ya lo hemos extraído para ti en el archivo `@/i18n`, por lo que puedes usarlo así:
 
@@ -542,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Opcional) Paso 10: Acceder a la locale activa dentro de Server Actions
+</Step>
+
+<Step number={10} title="Acceder a la locale activa dentro de Server Actions" isOptional={true}>
 
 Las Server Actions pueden leer la locale actual usando `next-intl/server`. Esto es útil para enviar correos electrónicos localizados o almacenar preferencias de idioma junto con los datos enviados.
 
@@ -565,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` lee la locale establecida por el proxy de `next-intl`, por lo que funciona en cualquier parte del servidor: Route Handlers, Server Actions y funciones edge.
 
-### (Opcional) Paso 11: Internacionaliza tus Metadatos
+</Step>
+
+<Step number={11} title="Internacionaliza tus Metadatos" isOptional={true}>
 
 Traducir contenido es importante, pero el objetivo principal de la internacionalización es hacer que tu sitio web sea más visible para el mundo. I18n es una palanca increíble para mejorar la visibilidad de tu sitio web mediante un SEO adecuado.
 
@@ -604,7 +625,9 @@ export async function generateMetadata({
 // ... Resto del código de la página
 ```
 
-### (Opcional) Paso 12: Internacionaliza tu Sitemap
+</Step>
+
+<Step number={12} title="Internacionaliza tu Sitemap" isOptional={true}>
 
 Genera un sitemap que incluya todas las versiones locales de tus páginas. Esto ayuda a los motores de búsqueda a descubrir e indexar todas las versiones en diferentes idiomas de tu contenido.
 
@@ -658,7 +681,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcional) Paso 13: Internacionaliza tu archivo robots.txt
+</Step>
+
+<Step number={13} title="Internacionaliza tu archivo robots.txt" isOptional={true}>
 
 Crea un archivo robots.txt que maneje correctamente todas las versiones de locales de tus rutas protegidas. Esto asegura que los motores de búsqueda no indexen páginas de administración o panel en ningún idioma.
 
@@ -691,7 +716,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcional) Paso 14: Configurar Proxy para el Enrutamiento de Locales
+</Step>
+
+<Step number={14} title="Configurar Proxy para el Enrutamiento de Locales" isOptional={true}>
 
 Crea un proxy para detectar automáticamente la locale preferida del usuario y redirigirlo a la URL con el prefijo de locale correspondiente. next-intl proporciona una función proxy conveniente que maneja esto automáticamente.
 
@@ -711,7 +738,9 @@ export const config = {
 };
 ```
 
-### (Opcional) Paso 15: Configurar los tipos de TypeScript para la locale
+</Step>
+
+<Step number={15} title="Configurar los tipos de TypeScript para la locale" isOptional={true}>
 
 Configurar TypeScript te ayudará a obtener autocompletado y seguridad de tipos para tus claves.
 
@@ -737,7 +766,9 @@ declare module "next-intl" {
 
 Este código usará la Ampliación de Módulos (Module Augmentation) para añadir los locales y mensajes al tipo AppConfig de next-intl.
 
-### (Opcional) Paso 15: Automatiza tus traducciones usando Intlayer
+</Step>
+
+<Step number={16} title="Automatiza tus traducciones usando Intlayer" isOptional={true}>
 
 Intlayer es una biblioteca **gratuita** y **de código abierto** diseñada para asistir en el proceso de localización en tu aplicación. Mientras que next-intl se encarga de la carga y gestión de las traducciones, Intlayer ayuda a automatizar el flujo de trabajo de traducción.
 
@@ -762,3 +793,7 @@ Intlayer te permitirá:
   Intlayer ofrece un editor visual gratuito para editar tu contenido usando un editor visual. Aprende más sobre [edición visual de tus traducciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md).
 
 Y más. Para descubrir todas las funcionalidades que ofrece Intlayer, por favor consulta la [documentación sobre el interés de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/fr/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Avant de plonger dans l'implémentation, voici quelques pratiques que vous devri
   title="Demo CodeSandbox - Comment internationaliser votre application avec Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Voir [Application Template](https://github.com/aymericzip/next-i18next-template) sur GitHub.
 
@@ -116,7 +117,9 @@ Voici la structure du projet que nous allons créer :
         └── ServerComponent.tsx
 ```
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les paquets nécessaires en utilisant npm :
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next** : Les bindings React pour i18next qui fournissent des hooks comme `useTranslation` pour les composants clients.
 - **i18next-resources-to-backend** : Un plugin qui permet le chargement dynamique des fichiers de traduction, vous permettant de charger uniquement les namespaces dont vous avez besoin.
 
-### Étape 2 : Configurez votre projet
+</Step>
+
+<Step number={2} title="Configurez votre projet">
 
 Créez un fichier de configuration pour définir vos locales supportées, la locale par défaut, et des fonctions utilitaires pour la localisation des URLs. Ce fichier sert de source unique de vérité pour votre configuration i18n et garantit la sécurité des types dans toute votre application.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Étape 3 : Centraliser les espaces de noms de traduction
+</Step>
+
+<Step number={3} title="Centraliser les espaces de noms de traduction">
 
 Créez une source unique de vérité pour chaque namespace que votre application expose. Réutiliser cette liste permet de garder le code serveur, client et les outils synchronisés et active une typage fort pour les helpers de traduction.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Étape 4 : Typage fort des clés de traduction avec TypeScript
+</Step>
+
+<Step number={4} title="Typage fort des clés de traduction avec TypeScript">
 
 Augmentez `i18next` pour pointer vers vos fichiers de langue canoniques (généralement en anglais). TypeScript en déduit alors les clés valides par namespace, ce qui permet de vérifier les appels à `t()` de bout en bout.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Étape 5 : Configurer l'initialisation i18n côté serveur
+</Step>
+
+<Step number={5} title="Configurer l'initialisation i18n côté serveur">
 
 Créez une fonction d'initialisation côté serveur qui charge les traductions pour les composants serveur. Cette fonction crée une instance i18next distincte pour le rendu côté serveur, garantissant que les traductions sont chargées avant le rendu.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Étape 6 : Créer un Provider i18n côté client
+</Step>
+
+<Step number={6} title="Créer un Provider i18n côté client">
 
 Créez un provider composant client qui enveloppe votre application avec le contexte i18next. Ce provider reçoit des traductions préchargées depuis le serveur afin d'éviter un flash de contenu non traduit (FOUC) et d'éviter les requêtes en double.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Étape 7 : Définir les routes dynamiques pour les locales
+</Step>
+
+<Step number={7} title="Définir les routes dynamiques pour les locales">
 
 Configurez le routage dynamique pour les locales en créant un répertoire `[locale]` dans votre dossier app. Cela permet à Next.js de gérer le routage basé sur la locale où chaque locale devient un segment d'URL (par exemple, `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Étape 8 : Créez vos fichiers de traduction
+</Step>
+
+<Step number={8} title="Créez vos fichiers de traduction">
 
 Créez des fichiers JSON pour chaque locale et namespace. Cette structure vous permet d'organiser les traductions de manière logique et de ne charger que ce dont vous avez besoin pour chaque page.
 
@@ -493,7 +510,9 @@ Organiser les traductions par namespace (par exemple, `common.json`, `about.json
 }
 ```
 
-### Étape 9 : Utiliser les traductions dans vos pages
+</Step>
+
+<Step number={9} title="Utiliser les traductions dans vos pages">
 
 Créez un composant de page qui initialise i18next côté serveur et transmet les traductions aux composants serveur et client. Cela garantit que les traductions sont chargées avant le rendu et évite les clignotements de contenu.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Étape 10 : Utiliser les traductions dans les composants client
+</Step>
+
+<Step number={10} title="Utiliser les traductions dans les composants client">
 
 Les composants client peuvent utiliser le hook `useTranslation` pour accéder aux traductions. Ce hook fournit l'accès à la fonction de traduction ainsi qu'à l'instance i18n, ce qui vous permet de traduire du contenu et d'accéder aux informations de locale.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Étape 11 : Utiliser les traductions dans les composants serveur
+</Step>
+
+<Step number={11} title="Utiliser les traductions dans les composants serveur">
 
 Les composants serveur ne peuvent pas utiliser les hooks React, ils reçoivent donc les traductions via les props de leurs composants parents. Cette approche maintient les composants serveur synchrones et permet de les imbriquer à l'intérieur des composants client.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Optionnel) Étape 12 : Changer la langue de votre contenu
+<Step number={12} title="Changer la langue de votre contenu" isOptional={true}>
 
 Pour changer la langue de votre contenu dans Next.js, la méthode recommandée est d'utiliser des URLs préfixées par la locale et les liens Next.js. L'exemple ci-dessous lit la locale actuelle depuis la route, la supprime du pathname, et affiche un lien par locale disponible.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optionnel) Étape 13 : Construire un composant Link localisé
+</Step>
+
+<Step number={13} title="Construire un composant Link localisé" isOptional={true}>
 
 Réutiliser les URLs localisées dans toute votre application permet de garder une navigation cohérente et optimisée pour le SEO. Enveloppez `next/link` dans un petit helper qui préfixe les routes internes avec la locale active tout en laissant les URLs externes intactes.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Astuce : Comme `LocalizedLink` est un remplacement direct, migrez progressivement en échangeant les imports et en laissant le composant gérer les URLs spécifiques à la locale.
 
-### (Optionnel) Étape 14 : Accéder à la locale active dans les Server Actions
+</Step>
+
+<Step number={14} title="Accéder à la locale active dans les Server Actions" isOptional={true}>
 
 Les Server Actions ont souvent besoin de la locale courante pour les emails, la journalisation ou les intégrations tierces. Combinez le cookie de locale défini par votre proxy avec l'en-tête `Accept-Language` en tant que solution de secours.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Parce que l'assistant s'appuie sur les cookies et les en-têtes de Next.js, il fonctionne dans les Route Handlers, les Server Actions, et d'autres contextes réservés au serveur.
 
-### (Optionnel) Étape 15 : Internationalisez vos métadonnées
+</Step>
+
+<Step number={15} title="Internationalisez vos métadonnées" isOptional={true}>
 
 Traduire le contenu est important, mais l'objectif principal de l'internationalisation est de rendre votre site web plus visible dans le monde. L'i18n est un levier incroyable pour améliorer la visibilité de votre site via un SEO approprié.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Optionnel) Étape 16 : Internationalisez votre sitemap
+</Step>
+
+<Step number={16} title="Internationalisez votre sitemap" isOptional={true}>
 
 Générez un sitemap qui inclut toutes les versions locales de vos pages. Cela aide les moteurs de recherche à découvrir et indexer toutes les versions linguistiques de votre contenu.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optionnel) Étape 17 : Internationalisez votre fichier robots.txt
+</Step>
+
+<Step number={17} title="Internationalisez votre fichier robots.txt" isOptional={true}>
 
 Créez un fichier robots.txt qui gère correctement toutes les versions locales de vos routes protégées. Cela garantit que les moteurs de recherche n'indexent pas les pages d'administration ou de tableau de bord dans aucune langue.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optionnel) Étape 18 : Configurer un Middleware pour le Routage des Locales
+</Step>
+
+<Step number={18} title="Configurer un Middleware pour le Routage des Locales" isOptional={true}>
 
 Créez un proxy pour détecter automatiquement la locale préférée de l'utilisateur et le rediriger vers l'URL préfixée par la locale appropriée. Cela améliore l'expérience utilisateur en affichant le contenu dans sa langue préférée.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (Optionnel) Étape 19 : Automatisez vos traductions avec Intlayer
+</Step>
+
+<Step number={19} title="Automatisez vos traductions avec Intlayer" isOptional={true}>
 
 Intlayer est une bibliothèque **gratuite** et **open-source** conçue pour assister le processus de localisation dans votre application. Alors que i18next gère le chargement et la gestion des traductions, Intlayer aide à automatiser le flux de travail des traductions.
 
@@ -1084,3 +1121,7 @@ Intlayer vous permet de :
   Intlayer propose un éditeur visuel gratuit pour éditer votre contenu via un éditeur visuel. En savoir plus sur [l'édition visuelle de vos traductions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md).
 
 Et plus encore. Pour découvrir toutes les fonctionnalités offertes par Intlayer, veuillez consulter la [documentation sur l'intérêt d'Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/fr/i18n_using_next-intl.md

@@ -73,6 +73,7 @@ Localisez les liens en utilisant le composant `Link` pour rediriger l’utilisat
   title="Démo CodeSandbox - Comment internationaliser votre application avec Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Voir le [Modèle d’Application](https://github.com/aymericzip/next-intl-template) sur GitHub.
 
@@ -108,7 +109,9 @@ Voici la structure du projet que nous allons créer :
         └── ServerComponent.tsx
 ```
 
-### Étape 1 : Installer les dépendances
+<Steps>
+
+<Step number={1} title="Installer les dépendances">
 
 Installez les paquets nécessaires en utilisant npm :
 
@@ -126,7 +129,9 @@ yarn add next-intl
 
 - **next-intl** : La bibliothèque principale d'internationalisation pour Next.js App Router qui fournit des hooks, des fonctions serveur et des providers client pour gérer les traductions.
 
-### Étape 2 : Configurer votre projet
+</Step>
+
+<Step number={2} title="Configurer votre projet">
 
 Créez un fichier de configuration qui définit vos locales supportées et configure la gestion des requêtes de next-intl. Ce fichier sert de source unique de vérité pour votre configuration i18n et garantit la sécurité des types dans toute votre application.
 
@@ -211,7 +216,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Étape 3 : Définir les routes dynamiques par locale
+</Step>
+
+<Step number={3} title="Définir les routes dynamiques par locale">
 
 Configurez le routage dynamique pour les locales en créant un répertoire `[locale]` dans votre dossier app. Cela permet à Next.js de gérer le routage basé sur la locale où chaque locale devient un segment de l'URL (par exemple, `/en/about`, `/fr/about`).
 
@@ -299,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### Étape 4 : Créez vos fichiers de traduction
+</Step>
+
+<Step number={4} title="Créez vos fichiers de traduction">
 
 Créez des fichiers JSON pour chaque locale et namespace. Cette structure vous permet d’organiser les traductions de manière logique et de ne charger que ce dont vous avez besoin pour chaque page.
 
@@ -341,7 +350,9 @@ Organiser les traductions par namespace (par exemple, `common.json`, `about.json
 }
 ```
 
-### Étape 5 : Utiliser les traductions dans vos pages
+</Step>
+
+<Step number={5} title="Utiliser les traductions dans vos pages">
 
 Créez un composant de page qui charge les traductions côté serveur et les transmet aux composants serveur et client. Cela garantit que les traductions sont chargées avant le rendu et évite les clignotements de contenu.
 
@@ -392,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### Étape 6 : Utiliser les traductions dans les composants client
+</Step>
+
+<Step number={6} title="Utiliser les traductions dans les composants client">
 
 Les composants client peuvent utiliser les hooks `useTranslations` et `useFormatter` pour accéder aux traductions et aux fonctions de formatage. Ces hooks lisent le contexte de `NextIntlClientProvider`.
 
@@ -428,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Étape 7 : Utiliser les traductions dans les composants serveur
+</Step>
+
+<Step number={7} title="Utiliser les traductions dans les composants serveur">
 
 Les composants serveur ne peuvent pas utiliser les hooks React, ils reçoivent donc les traductions et les formateurs via des props de leurs composants parents. Cette approche maintient les composants serveur synchrones et leur permet d’être imbriqués à l’intérieur des composants client.
 
@@ -460,9 +475,9 @@ const ServerComponent = ({
 
 > Dans votre page/layout, utilisez `getTranslations` et `getFormatter` depuis `next-intl/server` pour pré-calculer les traductions et le formatage, puis passez-les en props aux composants serveur.
 
----
+</Step>
 
-### (Optionnel) Étape 8 : Changer la langue de votre contenu
+<Step number={8} title="Changer la langue de votre contenu" isOptional={true}>
 
 Pour changer la langue de votre contenu avec next-intl, affichez des liens sensibles à la locale qui pointent vers le même chemin tout en changeant la locale. Le provider réécrit automatiquement les URLs, vous n'avez donc qu'à cibler la route actuelle.
 
@@ -534,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optionnel) Étape 9 : Utiliser le composant Link localisé
+</Step>
+
+<Step number={9} title="Utiliser le composant Link localisé" isOptional={true}>
 
 `next-intl` fournit un sous-package `next-intl/navigation` qui contient un composant Link localisé appliquant automatiquement la locale active. Nous l'avons déjà extrait pour vous dans le fichier `@/i18n`, vous pouvez donc l'utiliser ainsi :
 
@@ -544,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Optionnel) Étape 10 : Accéder à la locale active dans les Server Actions
+</Step>
+
+<Step number={10} title="Accéder à la locale active dans les Server Actions" isOptional={true}>
 
 Les Server Actions peuvent lire la locale courante en utilisant `next-intl/server`. Cela est utile pour envoyer des emails localisés ou stocker les préférences de langue avec les données soumises.
 
@@ -567,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` lit la locale définie par le proxy `next-intl`, donc cela fonctionne partout sur le serveur : Route Handlers, Server Actions et fonctions edge.
 
-### (Optionnel) Étape 11 : Internationalisez vos métadonnées
+</Step>
+
+<Step number={11} title="Internationalisez vos métadonnées" isOptional={true}>
 
 La traduction du contenu est importante, mais l'objectif principal de l'internationalisation est de rendre votre site web plus visible dans le monde. L'i18n est un levier incroyable pour améliorer la visibilité de votre site grâce à un SEO approprié.
 
@@ -606,7 +627,9 @@ export async function generateMetadata({
 // ... Reste du code de la page
 ```
 
-### (Optionnel) Étape 12 : Internationalisez votre Sitemap
+</Step>
+
+<Step number={12} title="Internationalisez votre Sitemap" isOptional={true}>
 
 Générez un sitemap qui inclut toutes les versions locales de vos pages. Cela aide les moteurs de recherche à découvrir et indexer toutes les versions linguistiques de votre contenu.
 
@@ -660,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optionnel) Étape 13 : Internationalisez votre fichier robots.txt
+</Step>
+
+<Step number={13} title="Internationalisez votre fichier robots.txt" isOptional={true}>
 
 Créez un fichier robots.txt qui gère correctement toutes les versions locales de vos routes protégées. Cela garantit que les moteurs de recherche n'indexent pas les pages d'administration ou de tableau de bord dans aucune langue.
 
@@ -693,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optionnel) Étape 14 : Configurer un proxy pour le routage des locales
+</Step>
+
+<Step number={14} title="Configurer un proxy pour le routage des locales" isOptional={true}>
 
 Créez un proxy pour détecter automatiquement la locale préférée de l'utilisateur et le rediriger vers l'URL préfixée par la locale appropriée. next-intl fournit une fonction proxy pratique qui gère cela automatiquement.
 
@@ -713,7 +740,9 @@ export const config = {
 };
 ```
 
-### (Optionnel) Étape 15 : Configurer les types TypeScript pour la locale
+</Step>
+
+<Step number={15} title="Configurer les types TypeScript pour la locale" isOptional={true}>
 
 Configurer TypeScript vous aidera à bénéficier de l'autocomplétion et de la sécurité de type pour vos clés.
 
@@ -739,7 +768,9 @@ declare module "next-intl" {
 
 Ce code utilise l'augmentation de module pour ajouter les locales et les messages au type AppConfig de next-intl.
 
-### (Optionnel) Étape 15 : Automatisez vos traductions avec Intlayer
+</Step>
+
+<Step number={16} title="Automatisez vos traductions avec Intlayer" isOptional={true}>
 
 Intlayer est une bibliothèque **gratuite** et **open-source** conçue pour assister le processus de localisation dans votre application. Alors que next-intl gère le chargement et la gestion des traductions, Intlayer aide à automatiser le flux de travail des traductions.
 
@@ -764,3 +795,7 @@ Intlayer vous permet de :
   Intlayer propose un éditeur visuel gratuit pour modifier votre contenu via une interface visuelle. En savoir plus sur [l’édition visuelle de vos traductions](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md).
 
 Et plus encore. Pour découvrir toutes les fonctionnalités offertes par Intlayer, veuillez consulter la [documentation sur l’intérêt d’Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>