@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/en-GB/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Before we dive into the implementation, here are some practices you should follo
   title="Demo CodeSandbox - How to Internationalise your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > See [Application Template](https://github.com/aymericzip/next-i18next-template) on GitHub.
 
@@ -116,7 +117,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: React bindings for i18next that provide hooks like `useTranslation` for client components.
 - **i18next-resources-to-backend**: A plugin that enables dynamic loading of translation files, allowing you to load only the namespaces you need.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file to define your supported locales, default locale, and helper functions for URL localisation. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Step 3: Centralise Translation Namespaces
+</Step>
+
+<Step number={3} title="Centralise Translation Namespaces">
 
 Create a single source of truth for every namespace your application exposes. Reusing this list keeps server, client, and tooling code in sync and unlocks strong typing for translation helpers.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Step 4: Strongly Type Translation Keys with TypeScript
+</Step>
+
+<Step number={4} title="Strongly Type Translation Keys with TypeScript">
 
 Augment `i18next` to point at your canonical language files (usually English). TypeScript then infers valid keys per namespace, so calls to `t()` are checked end-to-end.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Step 5: Set Up Server-Side i18n Initialisation
+</Step>
+
+<Step number={5} title="Set Up Server-Side i18n Initialisation">
 
 Create a server-side initialisation function that loads translations for server components. This function creates a separate i18next instance for server-side rendering, ensuring that translations are loaded before rendering.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Step 6: Create Client-Side i18n Provider
+</Step>
+
+<Step number={6} title="Create Client-Side i18n Provider">
 
 Create a client component provider that wraps your application with the i18next context. This provider receives pre-loaded translations from the server to prevent flash of untranslated content (FOUC) and avoid duplicate fetching.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Step 7: Define Dynamic Locale Routes
+</Step>
+
+<Step number={7} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Step 8: Create Your Translation Files
+</Step>
+
+<Step number={8} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
 
@@ -493,7 +510,9 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 9: Utilise Translations in Your Pages
+</Step>
+
+<Step number={9} title="Utilise Translations in Your Pages">
 
 Create a page component that initialises i18next on the server and passes translations to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 10: Use Translations in Client Components
+</Step>
+
+<Step number={10} title="Use Translations in Client Components">
 
 Client components can use the `useTranslation` hook to access translations. This hook provides access to the translation function and the i18n instance, allowing you to translate content and access locale information.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Step 11: Use Translations in Server Components
+</Step>
+
+<Step number={11} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Optional) Step 12: Change the language of your content
+<Step number={12} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content in Next.js, the recommended approach is to use locale-prefixed URLs and Next.js links. The example below reads the current locale from the route, removes it from the pathname, and renders one link per available locale.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 13: Build a localised Link component
+</Step>
+
+<Step number={13} title="Build a localised Link component" isOptional={true}>
 
 Reusing localised URLs across your app keeps navigation consistent and SEO-friendly. Wrap `next/link` in a small helper that prefixes internal routes with the active locale while leaving external URLs untouched.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Tip: Because `LocalizedLink` is a drop-in replacement, migrate gradually by swapping imports and letting the component handle locale-specific URLs.
 
-### (Optional) Step 14: Access the active locale inside Server Actions
+</Step>
+
+<Step number={14} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions often require the current locale for emails, logging, or third-party integrations. Combine the locale cookie set by your proxy with the `Accept-Language` header as a fallback.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Because the helper relies on Next.js cookies and headers, it works in Route Handlers, Server Actions, and other server-only contexts.
 
-### (Optional) Step 15: Internationalise Your Metadata
+</Step>
+
+<Step number={15} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Optional) Step 16: Internationalise Your Sitemap
+</Step>
+
+<Step number={16} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -935,7 +966,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 17: Internationalise Your robots.txt
+</Step>
+
+<Step number={17} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that correctly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
 
@@ -966,7 +999,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 18: Set Up Middleware for Locale Routing
+</Step>
+
+<Step number={18} title="Set Up Middleware for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. This enhances user experience by displaying content in their preferred language.
 
@@ -1055,7 +1090,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 19: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={19} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While i18next handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -1080,3 +1117,7 @@ Intlayer will allow you to:
   Intlayer offers a free visual editor to edit your content using a visual editor. Learn more about [visual editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/en-GB/i18n_using_next-intl.md

@@ -107,7 +107,9 @@ Here's the project structure we'll be creating:
         └── ServerComponent.tsx
 ```
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -125,7 +127,9 @@ yarn add next-intl
 
 - **next-intl**: The core internationalisation library for Next.js App Router that provides hooks, server functions, and client providers for managing translations.
 
-### Step 2: Configure Your Project
+</Step>
+
+<Step number={2} title="Configure Your Project">
 
 Create a configuration file that defines your supported locales and sets up next-intl's request configuration. This file serves as the single source of truth for your i18n setup and ensures type safety throughout your application.
 
@@ -209,7 +213,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Step 3: Define Dynamic Locale Routes
+</Step>
+
+<Step number={3} title="Define Dynamic Locale Routes">
 
 Set up dynamic routing for locales by creating a `[locale]` directory in your app folder. This allows Next.js to handle locale-based routing where each locale becomes a URL segment (e.g., `/en/about`, `/fr/about`).
 
@@ -297,7 +303,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 4: Create Your Translation Files
+</Step>
+
+<Step number={4} title="Create Your Translation Files">
 
 Create JSON files for each locale and namespace. This structure allows you to organise translations logically and load only what you need for each page.
 
@@ -339,7 +347,9 @@ Organising translations by namespace (e.g., `common.json`, `about.json`) enables
 }
 ```
 
-### Step 5: Utilise Translations in Your Pages
+</Step>
+
+<Step number={5} title="Utilise Translations in Your Pages">
 
 Create a page component that loads translations on the server and passes them to both server and client components. This ensures that translations are loaded before rendering and prevents content flashing.
 
@@ -390,7 +400,9 @@ export default async function AboutPage({
 }
 ```
 
-### Step 6: Use Translations in Client Components
+</Step>
+
+<Step number={6} title="Use Translations in Client Components">
 
 Client components can use the `useTranslations` and `useFormatter` hooks to access translations and formatting functions. These hooks read from the `NextIntlClientProvider` context.
 
@@ -426,7 +438,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Step 7: Use Translations in Server Components
+</Step>
+
+<Step number={7} title="Use Translations in Server Components">
 
 Server components cannot use React hooks, so they receive translations and formatters via props from their parent components. This approach keeps server components synchronous and allows them to be nested inside client components.
 
@@ -458,9 +472,9 @@ const ServerComponent = ({
 
 > In your page/layout, use `getTranslations` and `getFormatter` from `next-intl/server` to pre-compute translations and formatting, then pass them as props to server components.
 
----
+</Step>
 
-### (Optional) Step 8: Change the language of your content
+<Step number={8} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content with next-intl, render locale-aware links that point to the same pathname while switching locale. The provider rewrites URLs automatically, so you only have to target the current route.
 
@@ -532,7 +546,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Optional) Step 9: Use the localised Link component
+</Step>
+
+<Step number={9} title="Use the localised Link component" isOptional={true}>
 
 `next-intl` provides a subpackage `next-intl/navigation` that contains a localised link component that automatically applies the active locale. We have already extracted it for you in the `@/i18n` file, so you can use it like this:
 
@@ -542,7 +558,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Optional) Step 10: Access the active locale inside Server Actions
+</Step>
+
+<Step number={10} title="Access the active locale inside Server Actions" isOptional={true}>
 
 Server Actions can read the current locale using `next-intl/server`. This is useful for sending localised emails or storing language preferences alongside submitted data.
 
@@ -565,7 +583,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` reads the locale set by the `next-intl` proxy, so it works anywhere on the server: Route Handlers, Server Actions, and edge functions.
 
-### (Optional) Step 11: Internationalise Your Metadata
+</Step>
+
+<Step number={11} title="Internationalise Your Metadata" isOptional={true}>
 
 Translating content is important, but the main goal of internationalisation is to make your website more visible to the world. I18n is an incredible lever to improve your website visibility through proper SEO.
 
@@ -604,7 +624,9 @@ export async function generateMetadata({
 // ... Rest of the page code
 ```
 
-### (Optional) Step 12: Internationalise Your Sitemap
+</Step>
+
+<Step number={12} title="Internationalise Your Sitemap" isOptional={true}>
 
 Generate a sitemap that includes all locale versions of your pages. This helps search engines discover and index all language versions of your content.
 
@@ -658,7 +680,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Optional) Step 13: Internationalise Your robots.txt
+</Step>
+
+<Step number={13} title="Internationalise Your robots.txt" isOptional={true}>
 
 Create a robots.txt file that properly handles all locale versions of your protected routes. This ensures that search engines do not index admin or dashboard pages in any language.
 
@@ -691,7 +715,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Optional) Step 14: Set Up Proxy for Locale Routing
+</Step>
+
+<Step number={14} title="Set Up Proxy for Locale Routing" isOptional={true}>
 
 Create a proxy to automatically detect the user's preferred locale and redirect them to the appropriate locale-prefixed URL. next-intl provides a convenient proxy function that handles this automatically.
 
@@ -711,7 +737,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 15: Set Up TypeScript Types for the Locale
+</Step>
+
+<Step number={15} title="Set Up TypeScript Types for the Locale" isOptional={true}>
 
 Setting up TypeScript will help you to get autocompletion and type safety for your keys.
 
@@ -737,7 +765,9 @@ declare module "next-intl" {
 
 This code will use Module Augmentation to add the locales and messages to the next-intl AppConfig type.
 
-### (Optional) Step 15: Automate Your Translations Using Intlayer
+</Step>
+
+<Step number={16} title="Automate Your Translations Using Intlayer" isOptional={true}>
 
 Intlayer is a **free** and **open-source** library designed to assist the localisation process in your application. While next-intl handles the translation loading and management, Intlayer helps automate the translation workflow.
 
@@ -762,3 +792,7 @@ Intlayer will allow you to:
   Intlayer offers a free visual editor to edit your content using a visual editor. Learn more about [visually editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_visual_editor.md).
 
 And more. To discover all the features provided by Intlayer, please refer to the [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/es/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Antes de sumergirnos en la implementación, aquí tienes algunas prácticas que
   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-i18next-template) en GitHub.
 
@@ -116,7 +117,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:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Enlaces de React para i18next que proporcionan hooks como `useTranslation` para componentes cliente.
 - **i18next-resources-to-backend**: Un plugin que permite la carga dinámica de archivos de traducción, permitiéndote cargar solo los namespaces que necesitas.
 
-### Paso 2: Configura Tu Proyecto
+</Step>
+
+<Step number={2} title="Configura Tu Proyecto">
 
 Crea un archivo de configuración para definir tus locales soportados, el locale por defecto y funciones auxiliares para la localización de URLs. 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.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Paso 3: Centralizar los Namespaces de Traducción
+</Step>
+
+<Step number={3} title="Centralizar los Namespaces de Traducción">
 
 Crea una única fuente de verdad para cada namespace que tu aplicación expone. Reutilizar esta lista mantiene sincronizado el código del servidor, cliente y herramientas, y desbloquea un tipado fuerte para los helpers de traducción.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Paso 4: Tipar fuertemente las claves de traducción con TypeScript
+</Step>
+
+<Step number={4} title="Tipar fuertemente las claves de traducción con TypeScript">
 
 Aumenta `i18next` para que apunte a tus archivos de idioma canónicos (usualmente inglés). TypeScript entonces infiere las claves válidas por namespace, por lo que las llamadas a `t()` se verifican de extremo a extremo.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Paso 5: Configurar la inicialización de i18n del lado del servidor
+</Step>
+
+<Step number={5} title="Configurar la inicialización de i18n del lado del servidor">
 
 Cree una función de inicialización del lado del servidor que cargue las traducciones para los componentes del servidor. Esta función crea una instancia separada de i18next para la renderización del lado del servidor, asegurando que las traducciones se carguen antes de la renderización.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Paso 6: Crear el proveedor i18n del lado del cliente
+</Step>
+
+<Step number={6} title="Crear el proveedor i18n del lado del cliente">
 
 Crea un proveedor de componente cliente que envuelva tu aplicación con el contexto de i18next. Este proveedor recibe traducciones precargadas desde el servidor para evitar el parpadeo de contenido sin traducir (FOUC) y evitar solicitudes duplicadas.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Paso 7: Definir Rutas Dinámicas para Locales
+</Step>
+
+<Step number={7} title="Definir Rutas Dinámicas para Locales">
 
 Configura el enrutamiento dinámico para locales creando un directorio `[locale]` en tu carpeta de la app. Esto permite que Next.js maneje el enrutamiento basado en locales donde cada locale se convierte en un segmento de la URL (por ejemplo, `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Paso 8: Crea tus archivos de traducción
+</Step>
+
+<Step number={8} title="Crea tus archivos de traducción">
 
 Crea archivos JSON para cada locale y namespace. Esta estructura te permite organizar las traducciones de forma lógica y cargar solo lo que necesitas para cada página.
 
@@ -481,7 +498,9 @@ Organizar las traducciones por namespace (por ejemplo, `common.json`, `about.jso
 }
 ```
 
-### Paso 9: Utiliza las Traducciones en Tus Páginas
+</Step>
+
+<Step number={9} title="Utiliza las Traducciones en Tus Páginas">
 
 Crea un componente de página que inicialice i18next en el servidor y pase las traducciones 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.
 
@@ -541,7 +560,9 @@ export default async function AboutPage({
 }
 ```
 
-### Paso 10: Usar traducciones en componentes cliente
+</Step>
+
+<Step number={10} title="Usar traducciones en componentes cliente">
 
 Los componentes cliente pueden usar el hook `useTranslation` para acceder a las traducciones. Este hook proporciona acceso a la función de traducción y a la instancia i18n, permitiéndote traducir contenido y acceder a la información del locale.
 
@@ -592,7 +613,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Paso 11: Usar traducciones en componentes del servidor
+</Step>
+
+<Step number={11} title="Usar traducciones en componentes del servidor">
 
 Los componentes del servidor no pueden usar hooks de React, por lo que reciben las traducciones a través de props desde sus componentes padre. Este enfoque mantiene los componentes del servidor síncronos y permite que se aniden dentro de componentes cliente.
 
@@ -638,9 +661,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Opcional) Paso 12: Cambiar el idioma de tu contenido
+<Step number={12} title="Cambiar el idioma de tu contenido" isOptional={true}>
 
 Para cambiar el idioma de tu contenido en Next.js, la forma recomendada es usar URLs con prefijo de locale y los enlaces de Next.js. El siguiente ejemplo lee el locale actual de la ruta, lo elimina del pathname y renderiza un enlace por cada locale disponible.
 
@@ -712,7 +735,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opcional) Paso 13: Construir un componente Link localizado
+</Step>
+
+<Step number={13} title="Construir un componente Link localizado" isOptional={true}>
 
 Reutilizar URLs localizadas en toda tu aplicación mantiene la navegación consistente y optimizada para SEO. Envuelve `next/link` en un pequeño helper que antepone la locale activa a las rutas internas, dejando intactas las URLs externas.
 
@@ -763,7 +788,9 @@ export default function LocalizedLink({
 
 > Consejo: Debido a que `LocalizedLink` es un reemplazo directo, migre gradualmente intercambiando las importaciones y dejando que el componente maneje las URLs específicas por locale.
 
-### (Opcional) Paso 14: Acceder al locale activo dentro de Server Actions
+</Step>
+
+<Step number={14} title="Acceder al locale activo dentro de Server Actions" isOptional={true}>
 
 Las Server Actions a menudo necesitan el locale actual para correos electrónicos, registros o integraciones con terceros. Combine la cookie de locale establecida por su proxy con el encabezado `Accept-Language` como respaldo.
 
@@ -801,7 +828,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Debido a que el helper depende de las cookies y cabeceras de Next.js, funciona en Route Handlers, Server Actions y otros contextos exclusivos del servidor.
 
-### (Opcional) Paso 15: Internacionaliza tus Metadatos
+</Step>
+
+<Step number={15} 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. La i18n es una palanca increíble para mejorar la visibilidad de tu sitio web mediante un SEO adecuado.
 
@@ -868,7 +897,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Opcional) Paso 16: Internacionaliza tu Sitemap
+</Step>
+
+<Step number={16} 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.
 
@@ -922,7 +953,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opcional) Paso 17: Internacionaliza tu archivo robots.txt
+</Step>
+
+<Step number={17} 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 las páginas de administración o panel en ningún idioma.
 
@@ -953,7 +986,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opcional) Paso 18: Configurar Middleware para el Enrutamiento de Locales
+</Step>
+
+<Step number={18} title="Configurar Middleware 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. Esto mejora la experiencia del usuario al mostrar contenido en su idioma preferido.
 
@@ -1042,7 +1077,9 @@ export const config = {
 };
 ```
 
-### (Opcional) Paso 19: Automatiza tus traducciones usando Intlayer
+</Step>
+
+<Step number={19} 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 i18next se encarga de la carga y gestión de traducciones, Intlayer ayuda a automatizar el flujo de trabajo de traducción.
 
@@ -1072,3 +1109,7 @@ Intlayer te permitirá:
   Intlayer ofrece un editor visual gratuito para editar tu contenido usando un editor visual. Aprende más sobre [editar visualmente 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 del interés de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>