@intlayer/docs 8.11.2 → 8.11.3

package/docs/es/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Cómo traducir una aplicación SvelteKit en 2026
-description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: SvelteKit i18n - Guía completa para traducir SvelteKit
+description: La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su SvelteKit sitio web en 2026, traducción LLM, Agent Skills & MCP.
 keywords:
   - Internacionalización
   - Documentación
@@ -59,16 +59,47 @@ history:
 
 <TOC/>
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Funciona perfectamente con las capacidades de Server-Side Rendering (SSR) de **SvelteKit**.
+En comparación con soluciones principales como `svelte-i18n` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puedes:
+<AccordionGroup>
+<Accordion header="Soporte completo de SvelteKit">
 
-- **Gestionar traducciones fácilmente** usando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Garantizar soporte para TypeScript** con tipos autogenerados.
-- **Aprovechar el SSR de SvelteKit** para una internacionalización amigable con SEO.
+Intlayer está optimizado para funcionar perfectamente con SvelteKit al ofrecer **enrutamiento multilingüe**, **soporte SSR** y todas las funciones necesarias para escalar la internacionalización (i18n).
+
+</Accordion>
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -116,7 +147,9 @@ Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final
 └── vite.config.ts
 ```
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -148,7 +181,9 @@ bun x intlayer init
 - **svelte-intlayer**: Proporciona context providers y stores para Svelte/SvelteKit.
 - **vite-intlayer**: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración en la raíz de tu proyecto:
 
@@ -165,7 +200,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Paso 3: Integra Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Actualiza tu `vite.config.ts` para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.
 
@@ -179,7 +216,9 @@ export default defineConfig({
 });
 ```
 
-### Paso 4: Declara Tu Contenido
+</Step>
+
+<Step number={4} title="Declara Tu Contenido">
 
 Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta `src` (por ejemplo, `src/lib/content` o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función `t()` para cada locale.
 
@@ -200,13 +239,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Paso 5: Utiliza Intlayer en Tus Componentes
+</Step>
+
+<Step number={5} title="Utiliza Intlayer en Tus Componentes">
 
 Ahora puedes usar la función `useIntlayer` en cualquier componente Svelte. Esta devuelve una tienda reactiva que se actualiza automáticamente cuando cambia el locale. La función respetará automáticamente el locale actual (tanto durante SSR como en la navegación del lado del cliente).
 
 > **Nota:** `useIntlayer` devuelve una tienda de Svelte, por lo que necesitas usar el prefijo `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Cómo traducir tu aplicación SvelteKit – Guía i18n 2026
 > description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR).
 > keywords:
@@ -231,6 +272,10 @@ Ahora puedes usar la función `useIntlayer` en cualquier componente Svelte. Esta
 
 # Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)
 
+</Step>
+
+</Steps>
+
 ## Tabla de Contenidos
 
 <TOC/>
@@ -292,7 +337,9 @@ Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final
 └── vite.config.ts
 ```
 
-### Paso 1: Instalar dependencias
+<Steps>
+
+<Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
 
@@ -324,7 +371,9 @@ bun x intlayer init
 - **svelte-intlayer**: Proporciona context providers y stores para Svelte/SvelteKit.
 - **vite-intlayer**: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.
 
-### Paso 2: Configuración de tu proyecto
+</Step>
+
+<Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración en la raíz de tu proyecto:
 
@@ -341,7 +390,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Paso 3: Integra Intlayer en tu configuración de Vite
+</Step>
+
+<Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Actualiza tu `vite.config.ts` para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.
 
@@ -355,7 +406,9 @@ export default defineConfig({
 });
 ```
 
-### Paso 4: Declara Tu Contenido
+</Step>
+
+<Step number={4} title="Declara Tu Contenido">
 
 Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta `src` (por ejemplo, `src/lib/content` o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función `t()` para cada locale.
 
@@ -376,7 +429,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Paso 5: Utiliza Intlayer en Tus Componentes
+</Step>
+
+<Step number={5} title="Utiliza Intlayer en Tus Componentes">
 
 para acceder a su valor reactivo (por ejemplo, `$content.title`).
 
@@ -398,7 +453,9 @@ para acceder a su valor reactivo (por ejemplo, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opcional) Paso 6: Configurar el enrutamiento
+</Step>
+
+<Step number={6} title="Configurar el enrutamiento" isOptional={true}>
 
 Los siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, `/en/about`, `/fr/about`) para mejorar el SEO y la experiencia del usuario.
 
@@ -423,7 +480,9 @@ Los siguientes pasos muestran cómo configurar el enrutamiento basado en el loca
         └── +layout.svelte         # Diseño raíz para fuentes y estilos globales
 ```
 
-### Paso 7: Manejar la detección del locale en el servidor (Hooks)
+</Step>
+
+<Step number={7} title="Manejar la detección del locale en el servidor">
 
 En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos `hooks.server.ts` para detectar el locale desde la URL o las cookies.
 
@@ -635,7 +694,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opcional) Paso 8: Enlaces internacionalizados
+</Step>
+
+<Step number={8} title="Enlaces internacionalizados" isOptional={true}>
 
 Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, `/en/about`, `/fr/about`). Este componente automáticamente prefija cualquier enlace con la locale actual.
 
@@ -668,7 +729,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale
 ```
 
-### (Opcional) Paso 9: Selector de idioma
+</Step>
+
+<Step number={9} title="Selector de idioma" isOptional={true}>
 
 Para permitir a los usuarios cambiar de idioma, actualiza la URL.
 
@@ -709,7 +772,9 @@ Para permitir a los usuarios cambiar de idioma, actualiza la URL.
 </style>
 ```
 
-### (Opcional) Paso 10: Añadir proxy backend
+</Step>
+
+<Step number={10} title="Añadir proxy backend" isOptional={true}>
 
 Para añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función `intlayerProxy` proporcionada por el plugin `vite-intlayer`. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.
 
@@ -728,7 +793,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcional) Paso 11: Configurar el editor / CMS de intlayer
+</Step>
+
+<Step number={11} title="Configurar el editor / CMS de intlayer" isOptional={true}>
 
 Para configurar el editor de intlayer, debes seguir la [documentación del editor de intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md).
 
@@ -753,7 +820,9 @@ Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis
 </div>
 ```
 
-### (Opcional) Paso 12 : Extraer el contenido de tus componentes
+</Step>
+
+<Step number={12} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -864,3 +933,7 @@ Se recomienda ignorar los archivos generados por Intlayer.
 
 - **Editor Visual**: Integra el [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) para editar las traducciones directamente desde la interfaz de usuario.
 - **CMS**: Externaliza la gestión de tu contenido usando el [CMS de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/es/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Cómo traducir una aplicación Tanstack Start usando Solid.js en 2026
-description: Aprenda cómo agregar internacionalización (i18n) a su aplicación Tanstack Start usando Intlayer y Solid.js. Siga esta guía completa para hacer que su aplicación sea multilingüe con enrutamiento consciente de la localización.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Guía completa para traducir TanStack Start
+description: La mejor solución para el tamaño del bundle, SEO, rendimiento & mantenibilidad. Haga multilingüe su TanStack Start and Solid aplicación en 2026, traducción LLM, Agent Skills & MCP.
 keywords:
   - Internacionalización
   - Documentación
@@ -38,17 +38,47 @@ history:
 
 Esta guía demuestra cómo integrar **Intlayer** para una internacionalización fluida en proyectos Tanstack Start con Solid.js, enrutamiento consciente de la localización, soporte de TypeScript y prácticas de desarrollo modernas.
 
-## ¿Qué es Intlayer?
+## ¿Por qué Intlayer en lugar de alternativas?
 
-**Intlayer** es una biblioteca de internacionalización (i18n) innovadora y de código abierto diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
+En comparación con soluciones principales como `react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
 
-Con Intlayer, puede:
+<AccordionGroup>
+<Accordion header="Soporte completo de TanStack Start">
 
-- **Gestionar fácilmente las traducciones** utilizando diccionarios declarativos a nivel de componente.
-- **Localizar dinámicamente metadatos**, rutas y contenido.
-- **Asegurar el soporte de TypeScript** con tipos autogenerados, mejorando el autocompletado y la detección de errores.
-- **Beneficiarse de funciones avanzadas**, como la detección y el cambio dinámico de idioma.
-- **Habilitar el enrutamiento consciente de la localización** con el sistema de enrutamiento basado en archivos de Tanstack Start.
+Intlayer está optimizado para funcionar perfectamente con TanStack Start y Solid al ofrecer **enrutamiento multilingüe**, **mapa del sitio** y todas las funciones necesarias para escalar la internacionalización (i18n).
+
+</Accordion>
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
+
+</Accordion>
+<Accordion header="Mantenibilidad">
+
+Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
+
+</Accordion>
+<Accordion header="Agente de IA">
+
+La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+
+</Accordion>
+<Accordion header="Automatización">
+
+Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
+
+</Accordion>
+<Accordion header="Actuación">
+
+La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
+
+</Accordion>
+<Accordion header="Escalando sin ningún desarrollador">
+
+Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -86,11 +116,15 @@ Con Intlayer, puede:
 
 Ver [Plantilla de aplicación](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) en GitHub.
 
-### Paso 1: Crear el proyecto
+<Steps>
+
+<Step number={1} title="Crear el proyecto">
 
 Comience creando un nuevo proyecto TanStack Start siguiendo la guía [Iniciar nuevo proyecto](https://tanstack.com/start/latest/docs/framework/solid/quick-start) en el sitio web de TanStack Start.
 
-### Paso 2: Instalar los paquetes de Intlayer
+</Step>
+
+<Step number={2} title="Instalar los paquetes de Intlayer">
 
 Instale los paquetes necesarios utilizando su gestor de paquetes preferido:
 
@@ -128,7 +162,9 @@ bun x intlayer init
 - **vite-intlayer**
   Incluye el plugin de Vite para integrar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar la redirección de URL.
 
-### Paso 3: Configuración de su proyecto
+</Step>
+
+<Step number={3} title="Configuración de su proyecto">
 
 Cree un archivo de configuración para configurar los idiomas de su aplicación:
 
@@ -149,7 +185,9 @@ export default config;
 
 > A través de este archivo de configuración, puede configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de sus declaraciones de contenido, desactivar los registros de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulte la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-### Paso 4: Integrar Intlayer en su configuración de Vite
+</Step>
+
+<Step number={4} title="Integrar Intlayer en su configuración de Vite">
 
 Añada el plugin de intlayer en su configuración:
 
@@ -177,7 +215,9 @@ export default defineConfig({
 
 > El plugin de Vite `intlayer()` se utiliza para integrar Intlayer con Vite. Asegura la construcción de los archivos de declaración de contenido y los monitoriza en modo de desarrollo. Define las variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
-### Paso 5: Crear el diseño raíz (Root Layout)
+</Step>
+
+<Step number={5} title="Crear el diseño raíz">
 
 Configure su diseño raíz para soportar la internacionalización utilizando `useParams` para detectar el idioma actual y estableciendo los atributos `lang` y `dir` en la etiqueta `html`.
 
@@ -218,7 +258,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Paso 6: Crear el diseño de idioma (Opcional)
+</Step>
+
+<Step number={6} title="Crear el diseño de idioma">
 
 Cree un diseño que maneje el prefijo de idioma y realice la validación. Este diseño asegurará que solo se procesen idiomas válidos.
 
@@ -253,7 +295,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Para el modo `'prefix-all'`, puede preferir cambiar el hueco a `$locale` en su lugar.
 > Para el modo `'no-prefix'` o `'search-params'`, puede eliminar el hueco por completo.
 
-### Paso 7: Declarar su contenido
+</Step>
+
+<Step number={7} title="Declarar su contenido">
 
 Cree y gestione sus declaraciones de contenido para almacenar traducciones:
 
@@ -299,7 +343,9 @@ export default appContent;
 
 > Para más detalles, consulte la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
 
-### Paso 8: Utilizar componentes y hooks conscientes del idioma
+</Step>
+
+<Step number={8} title="Utilizar componentes y hooks conscientes del idioma">
 
 Cree un componente `LocalizedLink` para una navegación consciente del idioma:
 
@@ -378,7 +424,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Paso 9: Utilizar Intlayer en sus páginas
+</Step>
+
+<Step number={9} title="Utilizar Intlayer en sus páginas">
 
 Acceda a sus diccionarios de contenido en toda su aplicación:
 
@@ -421,7 +469,9 @@ function RouteComponent() {
 >
 > Para saber más sobre el hook `useIntlayer`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useIntlayer.md).
 
-### Paso 10: Crear un componente selector de idioma (Locale Switcher)
+</Step>
+
+<Step number={10} title="Crear un componente selector de idioma">
 
 Cree un componente para permitir a los usuarios cambiar de idioma:
 
@@ -465,7 +515,9 @@ export default LocaleSwitcher;
 >
 > Para saber más sobre el hook `useLocale`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useLocale.md).
 
-### Paso 11: Gestión de atributos HTML
+</Step>
+
+<Step number={11} title="Gestión de atributos HTML">
 
 Como vimos en el Paso 5, puede gestionar los atributos `lang` y `dir` de la etiqueta `html` utilizando `useParams` en su componente raíz. Esto asegura que se establezcan los atributos correctos tanto en el servidor como en el cliente.
 
@@ -484,7 +536,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Paso 12: Añadir middleware (Opcional)
+</Step>
+
+<Step number={12} title="Añadir middleware">
 
 También puede utilizar `intlayerProxy` para añadir enrutamiento del lado del servidor a su aplicación. Este plugin detectará automáticamente el idioma actual basándose en la URL y establecerá la cookie de idioma adecuada. Si no se especifica ningún idioma, el plugin determinará el idioma más apropiado basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ningún idioma, redirigirá al idioma predeterminado.
 
@@ -515,7 +569,9 @@ export default defineConfig({
 
 ---
 
-### Paso 13: Internacionalizar sus metadatos (Opcional)
+</Step>
+
+<Step number={13} title="Internacionalizar sus metadatos">
 
 También puede utilizar la función `getIntlayer` para acceder a sus diccionarios de contenido dentro del cargador `head` para metadatos conscientes de la localización:
 
@@ -562,7 +618,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Paso 13: Recuperar el idioma en sus acciones de servidor (Opcional)
+</Step>
+
+<Step number={13} title="Recuperar el idioma en sus acciones de servidor">
 
 Es posible que desee acceder al idioma actual desde sus acciones de servidor o endpoints de API.
 Puede hacerlo utilizando el ayudante `getLocale` de `intlayer`.
@@ -599,7 +657,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Paso 14: Gestionar páginas no encontradas (Opcional)
+</Step>
+
+<Step number={14} title="Gestionar páginas no encontradas">
 
 Cuando un usuario visita una página inexistente, puede mostrar una página 404 personalizada y el prefijo de idioma puede afectar a la forma en que se activa la página no encontrada.
 
@@ -673,7 +733,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opcional) Paso 15: Extraer el contenido de sus componentes
+</Step>
+
+<Step number={15} title="Extraer el contenido de sus componentes" isOptional={true}>
 
 Si tiene una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -786,7 +848,9 @@ bun run build # O bun run dev
 
 ---
 
-### Paso 16: Generar un Sitemap (Opcional)
+</Step>
+
+<Step number={16} title="Generar un Sitemap">
 
 Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
 
@@ -859,7 +923,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Paso 17: Configurar TypeScript (Opcional)
+</Step>
+
+<Step number={17} title="Configurar TypeScript">
 
 Intlayer utiliza el aumento de módulos para aprovechar las ventajas de TypeScript y hacer que su base de código sea más robusta.
 
@@ -890,6 +956,10 @@ Para hacerlo, puede añadir las siguientes instrucciones a su archivo `.gitignor
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Extensión de VS Code
 
 Para mejorar su experiencia de desarrollo con Intlayer, puede instalar la **Extensión oficial de Intlayer VS Code**.