@intlayer/docs 9.4.4 → 9.5.1

package/docs/es/intlayer_with_react_router_v7.md

@@ -1,17 +1,17 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-08-30
+updatedAt: 2026-09-06
 title: "React Router v7 i18n - Guía completa para traducir tu aplicación"
-description: "Sin más i18next. La guía 2026 para crear una aplicación React Router v7 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
+description: "Sin más i18next. La guía 2026 para construir una aplicación React Router v7 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
-  - Internacionalización
-  - Documentación
+  - Internationalization
+  - Documentation
   - Intlayer
   - React Router v7
   - React
   - i18n
   - TypeScript
-  - Enrutamiento por Locale
+  - Locale Routing
 slugs:
   - doc
   - environment
@@ -23,7 +23,7 @@ youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
   - version: 8.9.0
     date: 2026-05-04
-    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
+    changes: "Actualizar el uso de la API Solid useIntlayer al acceso directo de propiedades"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Agregar comando init"
@@ -32,77 +32,111 @@ history:
     changes: "Actualizar Layout y manejar 404"
   - version: 6.1.5
     date: 2025-10-03
-    changes: "Documento actualizado"
+    changes: "Actualizar documentación"
   - version: 5.8.2
     date: 2025-09-04
-    changes: "Añadido para React Router v7"
+    changes: "Agregado para React Router v7"
 author: aymericzip
 ---
 
-# Traduce tu React Router v7 con Intlayer | Internacionalización (i18n)
+# Traduce tu sitio web de React Router v7 usando Intlayer | Internacionalización (i18n)
 
-Esta guía demuestra cómo integrar **Intlayer** para una internacionalización fluida en proyectos con React Router v7, con enrutamiento consciente del locale, soporte para TypeScript y prácticas modernas de desarrollo.
+Esta guía demuestra cómo integrar **Intlayer** para internacionalización sin interrupciones en proyectos de React Router v7 con enrutamiento consciente de la configuración regional, soporte de TypeScript y prácticas modernas de desarrollo.
 
-Esta guía se enfoca en el enrutamiento frontend. Para el enrutamiento de fs-routes, consulta la guía [Intlayer with React Router v7 File-System Routes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_react_router_v7_fs_routes.md).
+Cubre tanto **enrutamiento basado en configuración** (`routes.ts`) como **enrutamiento basado en sistema de archivos** (`@react-router/fs-routes`).
 
 ## Tabla de contenidos
 
 <TOC/>
 
-## ¿Por qué Intlayer en lugar de alternativas?
+## ¿Por qué Intlayer sobre alternativas?
 
-En comparación con soluciones principales como `react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
+En comparación con soluciones principales como `react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas tales como:
 
 <AccordionGroup>
-<Accordion header="Cobertura completa del enrutador React">
+<Accordion header="Cobertura completa de React Router">
 
-Intlayer está optimizado para funcionar perfectamente con React Router al ofrecer **enrutamiento con reconocimiento local**, **middleware para detección local** y todas las funciones necesarias para escalar la internacionalización (i18n).
+Intlayer está optimizado para funcionar perfectamente con React Router ofreciendo **enrutamiento consciente de locale**, **middleware para detección de locale**, y todas las características necesarias para escalar 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%**.
+En lugar de cargar archivos JSON masivos en tus páginas, carga solo el contenido necesario. Intlayer ayuda a **reducir tu bundle y tamaños de página hasta 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.
+Delimitar el contenido de tu aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puedes duplicar o eliminar una única carpeta de características sin la carga mental de revisar tu entire codebase de contenido. Además, Intlayer está **totalmente tipado** para garantizar la precisión de tu contenido.
 
 </Accordion>
+<Accordion header="AI Agent">
 
-<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/es/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
+Co-ubicar contenido **reduce el contexto necesario** por Large Language Models (LLMs). Intlayer también viene con un conjunto de herramientas, como un **CLI** para probar traducciones faltantes, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**, y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**, para hacer la experiencia del desarrollador (DX) aún más suave para 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**.
+Usa automatización para traducir en tu pipeline CI/CD usando el LLM de tu elección al costo de tu proveedor de IA. Intlayer también ofrece un **compiler** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para ayudarte a **traducir en el background**.
 
 </Accordion>
+<Accordion header="Rendimiento">
 
-<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.
+Conectar archivos JSON masivos a componentes puede llevar a problemas de rendimiento y reactividad. Intlayer optimiza tu carga de contenido en tiempo de build.
 
 </Accordion>
+<Accordion header="Escala con non-dev">
 
-<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.
+Más que solo una solución i18n, Intlayer proporciona un **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) auto-hospedado** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md)** para ayudarte a gestionar tu contenido multilingüe en **tiempo real**, haciendo la colaboración con traductores, redactores, y otros miembros del equipo sin fricciones. El contenido puede almacenarse localmente y/o remotamente.
 
 </Accordion>
 </AccordionGroup>
 
----
+## Guía paso a paso para configurar Intlayer en una aplicación React Router v7
 
-## Guía paso a paso para configurar Intlayer en una aplicación con React Router v7
+<Tabs defaultTab="video">
+  <Tab label="Video" value="video">
 
-<Steps>
+<iframe title="How to translate an React Router v7 app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+  </Tab>
+  <Tab label="Code (Config-based)" value="code-config">
+
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer (Config-based)"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Code (File-System Routes)" value="code-fs">
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-fs-routes-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer (File-System Routes)"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+  <Tab label="Demo (Config-based)" value="demo">
+
+<iframe
+  src="https://intlayer-react-router-v7.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Intlayer React Router v7 Template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+Consulta la [plantilla de enrutamiento basado en configuración](https://github.com/aymericzip/intlayer-react-router-v7-template) o la [plantilla de rutas del sistema de archivos](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) en GitHub.
+
+<Steps>
 <Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando tu gestor de paquetes preferido:
@@ -123,9 +157,9 @@ yarn dlx intlayer init --interactive
 bunx intlayer init --interactive
 ```
 
-> la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
+> La bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
 
-> Este comando detectará su entorno e instalará los paquetes necesarios. Por ejemplo:
+> Este comando detectará tu entorno e instalará los paquetes requeridos. Por ejemplo:
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -149,57 +183,105 @@ bun add vite-intlayer --dev
 
 - **intlayer**
 
-  El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, [declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpile y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
+  El paquete principal que proporciona herramientas de internacionalización para la gestión de configuración, traducción, [declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación, y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **react-intlayer**
-  El paquete que integra Intlayer con la aplicación React. Proporciona proveedores de contexto y hooks para la internacionalización en React.
+  El paquete que integra Intlayer con la aplicación React. Proporciona proveedores de contexto y hooks para la internacionalización de React.
 
 - **vite-intlayer**
-  Incluye el plugin de Vite para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como middleware para detectar el locale preferido del usuario, gestionar cookies y manejar la redirección de URLs.
+  Incluye el plugin de Vite para integrar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como middleware para detectar la configuración regional preferida del usuario, gestionar cookies y manejar redirecciones de URL.
 
 </Step>
-
 <Step number={2} title="Configuración de tu proyecto">
 
-</Step>
-
-</Steps>
-
-## Guía paso a paso para configurar Intlayer en una aplicación React Router v7 con rutas basadas en el sistema de archivos
+<Tabs group="routing-type">
+<Tab label="Enrutamiento basado en configuración" value="config-based">
+
+### Arquitectura
+
+En esta arquitectura, las rutas se definen programáticamente en `app/routes.ts` con segmentos dinámicos opcionales `/:locale?`. Las páginas localizadas, los layouts y las declaraciones de contenido se organizan dentro del directorio `app/`:
+
+```bash
+.
+├── app
+│   ├── components
+│   │   ├── locale-switcher.content.ts
+│   │   ├── locale-switcher.tsx
+│   │   ├── localized-link.tsx
+│   │   ├── navbar.content.ts
+│   │   └── navbar.tsx
+│   ├── hooks
+│   │   ├── useI18nHTMLAttributes.tsx
+│   │   └── useLocalizedNavigate.tsx
+│   ├── routes
+│   │   ├── about
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   ├── layout.tsx
+│   │   ├── page.content.ts
+│   │   └── page.tsx
+│   ├── root.tsx                      # Root layout for IntlayerProvider
+│   └── routes.ts                     # Route definition file
+├── intlayer.config.ts
+├── package.json
+├── react-router.config.ts
+├── tsconfig.json
+└── vite.config.ts
+```
 
-<Tabs defaultTab="video">
-  <Tab label="Vídeo" value="video">
+### Configuración
 
-<iframe title="How to translate an React Router v7 app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
+Crea un archivo de configuración `intlayer.config.ts` para declarar los idiomas compatibles con tu aplicación:
 
-  </Tab>
-  <Tab label="Code" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-react-router-v7-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  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"
-/>
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig, Locales } from "intlayer";
 
-  </Tab>
-  <Tab label="Demo" value="demo">
+const config: IntlayerConfig = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  },
+};
 
-<iframe
-  src="https://intlayer-react-router-v7.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo - intlayer-react-router-v7-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
+export default config;
+```
 
-  </Tab>
-</Tabs>
+</Tab>
+<Tab label="Rutas del sistema de archivos" value="fs-routes">
+
+### Arquitectura
+
+En esta arquitectura, las rutas siguen las convenciones del sistema de archivos de React Router v7 utilizando `flatRoutes`, donde los puntos (`.`) representan segmentos de URL y `($locale)` denota el segmento localizado opcional:
+
+```bash
+.
+├── app
+│   ├── components
+│   │   ├── locale-switcher.content.ts
+│   │   ├── locale-switcher.tsx
+│   │   ├── localized-link.tsx
+│   │   ├── navbar.content.ts
+│   │   └── navbar.tsx
+│   ├── hooks
+│   │   ├── useI18nHTMLAttributes.tsx
+│   │   └── useLocalizedNavigate.tsx
+│   ├── routes
+│   │   ├── ($locale)._index.content.ts
+│   │   ├── ($locale)._index.tsx
+│   │   ├── ($locale).about.content.ts
+│   │   └── ($locale).about.tsx
+│   ├── root.tsx                      # Root layout for IntlayerProvider
+│   └── routes.ts                     # Route definition file using flatRoutes
+├── intlayer.config.ts
+├── package.json
+├── react-router.config.ts
+├── tsconfig.json
+└── vite.config.ts
+```
 
-See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-template) on GitHub.
+### Configuración
 
-Crea un archivo de configuración para configurar los idiomas de tu aplicación:
+Crea un archivo de configuración `intlayer.config.ts` para declarar los idiomas compatibles con tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig, Locales } from "intlayer";
@@ -214,13 +296,15 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> A través de este archivo de configuración, puedes configurar URLs localizadas, redirección mediante middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, deshabilitar los registros de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+</Tab>
+</Tabs>
 
-<Steps>
+> A través de este archivo de configuración, puedes configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de tus declaraciones de contenido, deshabilitar logs de Intlayer en la consola, y más. Para una lista completa de parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
-<Step number={3} title="Integra Intlayer en tu configuración de Vite">
+</Step>
+<Step number={3} title="Integrar Intlayer en tu configuración de Vite">
 
-Agrega el plugin intlayer en tu configuración:
+Añade el plugin intlayer a tu configuración:
 
 ```typescript fileName="vite.config.ts"
 import { reactRouter } from "@react-router/dev/vite";
@@ -232,30 +316,56 @@ export default defineConfig({
 });
 ```
 
-> El plugin `intlayer()` para Vite se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los supervisa en modo desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
+> El plugin Vite `intlayer()` se utiliza para integrar Intlayer con Vite. Asegura la construcción de archivos de declaración de contenido y los monitorea en modo de desarrollo. Define variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
 </Step>
+<Step number={4} title="Configurar rutas de React Router v7">
 
-<Step number={4} title="Configurar las rutas de React Router v7">
+<Tabs group="routing-type">
+<Tab label="Enrutamiento basado en configuración" value="config-based">
 
-Configura tu enrutamiento con rutas conscientes del locale:
+Configura tu configuración de enrutamiento con rutas que tengan en cuenta la configuración regional:
 
 ```typescript fileName="app/routes.ts"
 import { layout, route, type RouteConfig } from "@react-router/dev/routes";
 
 export default [
-  route("/:lang?", "routes/page.tsx"), // Página de inicio localizada
-  route("/:lang?/about", "routes/about/page.tsx"), // Página "acerca de" localizada
+  route("/:locale?", "routes/page.tsx"), // Página de inicio localizada
+  route("/:locale?/about", "routes/about/page.tsx"), // Página acerca de localizada
 ] satisfies RouteConfig;
 ```
 
-</Step>
+</Tab>
+<Tab label="Rutas del sistema de archivos" value="fs-routes">
 
-<Step number={5} title="Crear Componentes de Layout">
+Configura tu configuración de enrutamiento para usar rutas basadas en el sistema de archivos con `flatRoutes`:
 
-Configura tu layout raíz y los layouts específicos por localización:
+```typescript fileName="app/routes.ts"
+import type { RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+import { configuration } from "intlayer";
+
+const routes: RouteConfig = flatRoutes({
+  // Ignora los archivos de declaración de contenido para que no se traten como rutas
+  ignoredRouteFiles: configuration.content.fileExtensions.map(
+    (fileExtension) => `**/*${fileExtension}`
+  ),
+});
 
-#### Layout Raíz
+export default routes;
+```
+
+> La función `flatRoutes` de `@react-router/fs-routes` habilita el enrutamiento basado en el sistema de archivos, donde la estructura de archivos en el directorio `routes/` determina las rutas de tu aplicación. La opción `ignoredRouteFiles` asegura que los archivos de declaración de contenido de Intlayer (`.content.ts`, etc.) no se traten como archivos de ruta.
+
+</Tab>
+</Tabs>
+
+</Step>
+<Step number={5} title="Crear componentes de diseño">
+
+Configura tu diseño raíz y diseños específicos de la configuración regional:
+
+#### Layout raíz
 
 ```tsx fileName="app/root.tsx"
 import { getLocaleFromPath } from "intlayer";
@@ -269,7 +379,7 @@ import {
 } from "react-router";
 import type { Route } from "./+types/root";
 
-// ... Unchanged App, links and ErrorBoundary code
+// ... Código de App, links y ErrorBoundary sin cambios
 
 export async function loader({ request }: Route.LoaderArgs) {
   const locale = getLocaleFromPath(request.url);
@@ -306,35 +416,34 @@ export function Layout({
 ```
 
 </Step>
+<Step number={6} title="Declare Your Content">
 
-<Step number={6} title="Declara Tu Contenido">
-
-Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
+Cree y administre sus declaraciones de contenido para almacenar traducciones:
 
-```tsx fileName="app/routes/[lang]/page.content.ts"
+```tsx fileName="app/routes/page.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 const pageContent = {
   key: "page",
   content: {
     title: t({
-      en: "Welcome to React Router v7 + Intlayer",
       es: "Bienvenido a React Router v7 + Intlayer",
+      en: "Welcome to React Router v7 + Intlayer",
       fr: "Bienvenue sur React Router v7 + Intlayer",
     }),
     description: t({
-      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
       es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
+      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
       fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
     }),
     aboutLink: t({
-      en: "Aprender Sobre Nosotros",
       es: "Aprender Sobre Nosotros",
+      en: "Learn About Us",
       fr: "En savoir plus sur nous",
     }),
     homeLink: t({
-      en: "Inicio",
       es: "Inicio",
+      en: "Home",
       fr: "Accueil",
     }),
   },
@@ -343,15 +452,16 @@ const pageContent = {
 export default pageContent;
 ```
 
-> Tus declaraciones de contenido pueden definirse en cualquier parte de tu aplicación tan pronto como se incluyan en el directorio `contentDir` (por defecto, `./app`). Y deben coincidir con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
+> Sus declaraciones de contenido pueden definirse en cualquier parte de su aplicación siempre que se incluyan en el directorio `contentDir` (por defecto, `./app`). Y que coincidan con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
 
-> Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
+> Podría colocarse en `app/routes/($locale)._index.content.ts` en caso de usar enrutamiento basado en el sistema de archivos.
 
-</Step>
+> 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).
 
-<Step number={7} title="Crear Componentes Sensibles al Idioma">
+</Step>
+<Step number={7} title="Create Locale-Aware Components">
 
-Crea un componente `LocalizedLink` para la navegación sensible al idioma:
+Cree un componente `LocalizedLink` para navegación con conocimiento de locale:
 
 ```tsx fileName="app/components/localized-link.tsx"
 import type { FC } from "react";
@@ -362,7 +472,6 @@ import { Link, type LinkProps, type To } from "react-router";
 
 const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
 
-// Función para localizar la URL según el locale
 export const locacalizeTo = (to: To, locale: LocalesValues): To => {
   if (typeof to === "string") {
     if (isExternalLink(to)) {
@@ -382,7 +491,6 @@ export const locacalizeTo = (to: To, locale: LocalesValues): To => {
   };
 };
 
-// Componente para enlaces localizados
 export const LocalizedLink: FC<LinkProps> = (props) => {
   const { locale } = useLocale();
 
@@ -390,7 +498,7 @@ export const LocalizedLink: FC<LinkProps> = (props) => {
 };
 ```
 
-En caso de que desees navegar a las rutas localizadas, puedes usar el hook `useLocalizedNavigate`:
+En caso de que desee navegar a rutas localizadas, puede usar el hook `useLocalizedNavigate`:
 
 ```tsx fileName="app/hooks/useLocalizedNavigate.ts"
 import { useLocale } from "react-intlayer";
@@ -413,13 +521,15 @@ export const useLocalizedNavigate = () => {
 ```
 
 </Step>
+<Step number={8} title="Utilize Intlayer in Your Pages">
 
-<Step number={8} title="Utiliza Intlayer en tus Páginas">
-
-Accede a tus diccionarios de contenido a lo largo de toda tu aplicación:
+Acceda a sus diccionarios de contenido en toda su aplicación:
 
 #### Página de inicio localizada
 
+<Tabs group="routing-type">
+<Tab label="Config-based routing" value="config-based">
+
 ```tsx fileName="app/routes/page.tsx"
 import { getIntlayer, validatePrefix } from "intlayer";
 import { useIntlayer } from "react-intlayer";
@@ -464,15 +574,67 @@ export default function Page() {
 }
 ```
 
+</Tab>
+<Tab label="File-system routes" value="fs-routes">
+
+```tsx fileName="app/routes/($locale)._index.tsx"
+import { getIntlayer, validatePrefix } from "intlayer";
+import { useIntlayer } from "react-intlayer";
+import { data } from "react-router";
+
+import { LocaleSwitcher } from "~/components/locale-switcher";
+
+import { Navbar } from "~/components/navbar";
+import type { Route } from "./+types/($locale)._index";
+
+export const loader = ({ params }: Route.LoaderArgs) => {
+  const { locale } = params;
+
+  const { isValid } = validatePrefix(locale);
+
+  if (!isValid) {
+    throw data("Locale not supported", { status: 404 });
+  }
+};
+
+export const meta: Route.MetaFunction = ({ params }) => {
+  const content = getIntlayer("page", params.locale);
+
+  return [
+    { title: content.title },
+    { content: content.description, name: "description" },
+  ];
+};
+
+export default function Page() {
+  const { title, description, aboutLink } = useIntlayer("page");
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
+      </nav>
+    </div>
+  );
+}
+```
+
+</Tab>
+</Tabs>
+
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useIntlayer.md).
 
-> Si su aplicación ya existe, puede utilizar el [Compilador Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md), así como el [comando de extracción](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md), para transformar miles de componentes en un segundo.
+> Si tu aplicación ya existe, puedes usar el [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md), así como el [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md), para transformar miles de componentes en un segundo.
 
 </Step>
+<Step number={9} title="Crear un componente Locale Switcher">
 
-<Step number={9} title="Crear un componente para cambiar de idioma">
+Crea un componente para permitir que los usuarios cambien de idioma:
 
-Crea un componente para permitir a los usuarios cambiar de idioma:
+<Tabs group="routing-type">
+<Tab label="Config-based routing" value="config-based">
 
 ```tsx fileName="app/components/locale-switcher.tsx"
 import type { FC } from "react";
@@ -482,16 +644,16 @@ import {
   getLocaleName,
   getLocalizedUrl,
   getPathWithoutLocale,
-  Locales,
+  defaultLocale,
 } from "intlayer";
-import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
 import { Link, useLocation } from "react-router";
 
 export const LocaleSwitcher: FC = () => {
   const { localeSwitcherLabel } = useIntlayer("locale-switcher");
   const { pathname } = useLocation();
 
-  const { availableLocales, locale } = useLocale();
+  const { availableLocales, locale, setLocale } = useLocale();
 
   const pathWithoutLocale = getPathWithoutLocale(pathname);
 
@@ -506,20 +668,20 @@ export const LocaleSwitcher: FC = () => {
             to={getLocalizedUrl(pathWithoutLocale, localeItem)}
           >
             <span>
-              {/* Localización - p.ej. FR */}
+              {/* Locale - p. ej. FR */}
               {localeItem}
             </span>
             <span>
-              {/* Idioma en su propia localización - p.ej. Français */}
+              {/* Idioma en su propia configuración regional - p. ej. Français */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* Idioma en la localización actual - p.ej. Francés con la localización actual configurada a Locales.SPANISH */}
+              {/* Idioma en la configuración regional actual - p. ej. Francés con la configuración regional actual establecida en Locales.SPANISH */}
               {getLocaleName(localeItem)}
             </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Idioma en inglés - por ejemplo, French */}
-              {getLocaleName(localeItem, Locales.ENGLISH)}
+            <span dir="ltr" lang={defaultLocale}>
+              {/* Idioma en inglés - p. ej. French */}
+              {getLocaleName(localeItem, defaultLocale)}
             </span>
           </Link>
         </li>
@@ -529,13 +691,74 @@ export const LocaleSwitcher: FC = () => {
 };
 ```
 
+</Tab>
+<Tab label="File-system routes" value="fs-routes">
+
+```tsx fileName="app/components/locale-switcher.tsx"
+import type { FC } from "react";
+
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  getPathWithoutLocale,
+  defaultLocale,
+} from "intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
+import { Link, useLocation } from "react-router";
+
+export const LocaleSwitcher: FC = () => {
+  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale, setLocale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+
+  return (
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <Link
+            aria-current={localeItem === locale ? "page" : undefined}
+            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
+            onClick={() => setLocale(localeItem)}
+            reloadDocument // Recarga la página para aplicar la nueva configuración regional
+            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
+          >
+            <span>
+              {/* Locale - p. ej. FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Idioma en su propia configuración regional - p. ej. Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Idioma en la configuración regional actual - p. ej. Francés con la configuración regional actual establecida en Locales.SPANISH */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={defaultLocale}>
+              {/* Idioma en inglés - p. ej. French */}
+              {getLocaleName(localeItem, defaultLocale)}
+            </span>
+          </Link>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+</Tab>
+</Tabs>
+
 > Para aprender más sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
 
 </Step>
+<Step number={10} title="Agregar gestión de atributos HTML">
 
-<Step number={10} title="Añadir gestión de atributos HTML">
-
-Crea un hook para gestionar los atributos lang y dir del HTML:
+Crea un hook para gestionar los atributos lang y dir de HTML:
 
 ```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
 import { getHTMLTextDir } from "intlayer";
@@ -558,10 +781,10 @@ Luego úsalo en tu componente raíz:
 import { Outlet } from "react-router";
 import { IntlayerProvider } from "react-intlayer";
 
-import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // importar el hook
+import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // importa el hook
 
 export default function RootLayout() {
-  useI18nHTMLAttributes(); // llamar al hook
+  useI18nHTMLAttributes(); // llama el hook
 
   return (
     <IntlayerProvider>
@@ -572,14 +795,13 @@ export default function RootLayout() {
 ```
 
 </Step>
-
 <Step number={11} title="Agregar middleware">
 
-También puedes usar `intlayerProxy` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basándose en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más apropiada en función de las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
+También puedes usar `intlayerProxy` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basándose en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica una configuración regional, el plugin determinará la configuración regional más apropiada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
 
-> Ten en cuenta que para usar `intlayerProxy` en producción, necesitas cambiar el paquete `vite-intlayer` de `devDependencies` a `dependencies`.
+> Ten en cuenta que para usar `intlayerProxy` en producción, debes cambiar el paquete `vite-intlayer` de `devDependencies` a `dependencies`.
 
-> Desde Intlayer v9, `intlayerProxy()` está incluido directamente en el plugin `intlayer()` y habilitado por defecto a través de la opción `routing.enableProxy` (`true` por defecto). Registrarlo por separado como se muestra a continuación ahora es opcional — se mantiene para compatibilidad hacia atrás y para configuraciones que necesitan controlar el orden del plugin. Establece `routing.enableProxy: false` para optar por no participar. Consulta las [notas de la versión v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/releases/v9.md).
+> Desde Intlayer v9, `intlayerProxy()` está incluido directamente en el plugin `intlayer()` y habilitado por defecto a través de la opción `routing.enableProxy` (`true` por defecto). Registrarlo por separado como se muestra a continuación ahora es opcional — se mantiene por compatibilidad con versiones anteriores y para configuraciones que necesitan controlar el orden de los plugins. Establece `routing.enableProxy: false` para optar por no participar. Consulta las [notas de la versión v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/releases/v9.md).
 
 ```typescript {3,7} fileName="vite.config.ts"
 import { defineConfig } from "vite";
@@ -600,14 +822,13 @@ export default defineConfig({
 ```
 
 </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.
 
-Para facilitar este proceso, Intlayer propone un [compilador](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) para transformar tus componentes y extraer el contenido.
+Para facilitar este proceso, Intlayer propone un [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) para transformar tus componentes y extraer el contenido.
 
-Para configurarlo, puedes agregar una sección `compiler` en tu archivo `intlayer.config.ts` :
+Para configurarlo, puedes agregar una sección `compiler` en tu archivo `intlayer.config.ts`:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
@@ -626,7 +847,11 @@ const config: IntlayerConfig = {
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
     /**
-     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
+     * Indica si los componentes deben guardarse después de ser transformados.
+     *
+     * - Si es `true`, el compilador reescribirá el archivo de componente en el disco. Entonces la transformación será permanente, y el compilador saltará la transformación para el próximo proceso. De esta manera, el compilador puede transformar la aplicación y luego puede ser removido.
+     *
+     * - Si es `false`, el compilador inyectará la llamada de función `useIntlayer()` en el código solo en la salida de compilación, y mantendrá la base de código intacta. La transformación se realizará solo en memoria.
      */
     saveComponents: false,
 
@@ -641,7 +866,7 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Comando de extracción'>
+ <Tab value='Extract command'>
 
 Ejecuta el extractor para transformar tus componentes y extraer el contenido
 
@@ -662,11 +887,11 @@ bun x intlayer extract
 ```
 
  </Tab>
- <Tab value='Compilador Babel'>
+ <Tab value='Babel compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+> Desde v9, el `intlayerCompiler` está incluido en el plugin `intlayer`. Por lo tanto, no necesitas agregarlo manualmente.
 
-Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
+Actualiza tu `vite.config.ts` para incluir el plugin `intlayerCompiler`:
 
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
@@ -675,7 +900,7 @@ import { intlayer, intlayerCompiler } from "vite-intlayer";
 export default defineConfig({
   plugins: [
     intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
+    intlayerCompiler(), // Agrega el plugin compilador
   ],
 });
 ```
@@ -693,7 +918,7 @@ yarn build # O yarn dev
 ```
 
 ```bash packageManager="bun"
-bun run build # Or bun run dev
+bun run build # O bun run dev
 ```
 
  </Tab>
@@ -703,61 +928,53 @@ bun run build # Or bun run dev
 
 </Steps>
 
-## Configure TypeScript
+## Configurar TypeScript
 
-Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
+Intlayer utiliza module augmentation para aprovechar los beneficios de TypeScript y fortalecer tu codebase.
 
-Ensure your TypeScript configuration includes the autogenerated types:
+Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados:
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... your existing configurations
+  // ... tus configuraciones existentes
   include: [
-    // ... your existing includes
-    ".intlayer/**/*.ts", // Include the auto-generated types
+    // ... tus includes existentes
+    ".intlayer/**/*.ts", // Incluye los tipos autogenerados
   ],
 }
 ```
 
----
-
-## Git Configuration
+## Configuración de Git
 
-It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
+Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar confirmarlos en tu repositorio de Git.
 
-To do this, you can add the following instructions to your `.gitignore` file:
+Para hacerlo, puedes añadir las siguientes instrucciones a tu archivo `.gitignore`:
 
 ```plaintext fileName=".gitignore"
 # Ignorar los archivos generados por Intlayer
 .intlayer
 ```
 
----
-
-## VS Code Extension
+## Extensión de VS Code
 
-To improve your development experience with Intlayer, you can install the official **Intlayer VS Code Extension**.
+Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **Extensión oficial de Intlayer para VS Code**.
 
-[Install from the VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Instalar desde el VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-This extension provides:
+Esta extensión proporciona:
 
-- **Autocompletion** for translation keys.
-- **Real-time error detection** for missing translations.
-- **Inline previews** of translated content.
-- **Quick actions** to easily create and update translations.
+- **Autocompletado** para claves de traducción.
+- **Detección de errores en tiempo real** para traducciones faltantes.
+- **Vistas previas en línea** del contenido traducido.
+- **Acciones rápidas** para crear y actualizar traducciones fácilmente.
 
-For more details on how to use the extension, refer to the [Intlayer VS Code Extension documentation](https://intlayer.org/doc/vs-code-extension).
+Para más detalles sobre cómo usar la extensión, consulta la [documentación de la Extensión de Intlayer para VS Code](https://intlayer.org/doc/vs-code-extension).
 
----
+## Ir Más Lejos
 
-## Ir Más Allá
+Para ir más lejos, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
 
-Para profundizar, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
-
----
-
-## Referencias de la Documentación
+## Referencias de Documentación
 
 - [Documentación de Intlayer](https://intlayer.org)
 - [Documentación de React Router v7](https://reactrouter.com/)
@@ -766,115 +983,101 @@ Para profundizar, puedes implementar el [editor visual](https://github.com/aymer
 - [Declaración de Contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md)
 - [Configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
 
-Esta guía completa proporciona todo lo que necesitas para integrar Intlayer con React Router v7 para una aplicación completamente internacionalizada con enrutamiento consciente del idioma y soporte para TypeScript.
+Esta guía completa te proporciona todo lo que necesitas para integrar Intlayer con React Router v7 para una aplicación completamente internacionalizada con enrutamiento consciente de la configuración regional y soporte para TypeScript.
 
 ## Preguntas frecuentes
 
 <FAQ>
 
-<Question title="¿Qué soluciones existen para internacionalizar una aplicación de React Router v7?">
+<Question title="¿Cuáles son las diferentes soluciones disponibles para internacionalizar una aplicación React Router v7?">
 
-React Router v7 no incluye ninguna capa de mensajes, así que lo emparejas con una biblioteca de i18n:
+React Router v7 no incluye una capa de mensajes, por lo que debes emparejarla con una biblioteca i18n:
 
-- **`react-i18next` / `i18next`**: espacios de nombres JSON cargados en tiempo de ejecución, con un detector de idioma independiente que conectar al router.
+- **`react-i18next` / `i18next`**: espacios de nombres JSON cargados en tiempo de ejecución, con un detector de localidad separado para conectarlo al router.
 - **`react-intl`** y **`Lingui`**: mensajes ICU con un paso de extracción.
-- **`Intlayer`**: contenido declarado junto a cada componente, compilado en tiempo de compilación, tipado de extremo a extremo, con utilidades de enrutamiento por idioma, traducción con IA, un editor visual y un CMS.
+- **`Intlayer`**: la solución más avanzada. Contenido declarado en cualquier lugar de tu codebase ([junto a cada componente o centralizado](https://intlayer.org/blog/per-component-vs-centralized-i18n)), compilado en tiempo de compilación, tipado de extremo a extremo, con ayudantes de enrutamiento conscientes de la localidad, traducción con IA, un editor visual y un CMS.
 
 Consulta [por qué Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/index.md).
 
 </Question>
+<Question title="¿Cuánto tamaño adicional agrega i18n al bundle de React Router?">
 
-<Question title="¿Cuánto añade la i18n al tamaño del bundle de mi aplicación React Router?">
-
-Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. El marcado renderizado en el servidor resuelve su contenido en el servidor, y el compilador de tiempo de compilación reemplaza las llamadas a `useIntlayer` por las entradas de diccionario exactas que usa un componente, de modo que se descartan las claves sin usar y los idiomas sin usar, y los [diccionarios dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md) reparten el resto por idioma. Frente a las alternativas habituales, Intlayer reduce el tamaño del bundle y de la página hasta en un 50%. Consulta la [optimización del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/index.md).
+Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. El marcado renderizado en el servidor resuelve su contenido en el servidor, y el compilador en tiempo de compilación reemplaza las llamadas a `useIntlayer` con las entradas exactas del diccionario que utiliza un componente, por lo que se descartan las claves no utilizadas e idiomas no utilizados, y los [diccionarios dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md) dividen el resto por localidad. Medido contra las alternativas usuales, Intlayer reduce el tamaño del bundle y la página hasta un 50%. Consulta la [optimización de bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/index.md).
 
 </Question>
-
 <Question title="¿Puedo migrar desde `react-i18next` o `react-intl` sin reescribir mis componentes?">
 
-Sí, y hay dos caminos. Puedes migrar el contenido de forma progresiva con la [guía de migración de react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_react-i18next_to_intlayer.md) o la [guía de migración de i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_i18next_to_intlayer.md). O puedes mantener tu API actual por completo: los [adaptadores de compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/index.md) exponen exactamente la misma API que `react-i18next`, `react-intl` y `i18next`, pero servida por diccionarios de Intlayer, así que cambian los imports y el código de los componentes no.
+Sí, y hay dos caminos. Puedes migrar el contenido progresivamente con la [guía de migración de react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_react-i18next_to_intlayer.md) o la [guía de migración de i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_i18next_to_intlayer.md). O puedes mantener tu API actual completamente: los [adaptadores de compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/index.md) exponen exactamente la misma API que `react-i18next`, `react-intl` e `i18next`, pero servida por diccionarios de Intlayer, por lo que las importaciones cambian y el código del componente no.
 
 </Question>
+<Question title="¿Puedo mantener mis archivos de traducción JSON existentes?">
 
-<Question title="¿Puedo conservar mis archivos de traducción JSON existentes?">
-
-Sí. El [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus archivos `/messages/{locale}/{namespace}.json` como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, en ambas direcciones. Un [plugin de sincronización PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-po.md) hace lo mismo para los catálogos gettext, y los [archivos por idioma](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/per_locale_file.md) te permiten dividir el contenido por idioma en lugar de agrupar los idiomas en un solo archivo.
+Sí. El [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus archivos `/messages/{locale}/{namespace}.json` como la fuente de verdad y genera diccionarios de Intlayer a partir de ellos, en ambas direcciones. Un [plugin de sincronización PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-po.md) hace lo mismo para catálogos gettext, y los [archivos por localidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/per_locale_file.md) te permiten dividir el contenido por idioma en lugar de agrupar localidades en un archivo.
 
 </Question>
+<Question title="¿Tengo que mover mi contenido clave por clave?">
 
-<Question title="¿Tengo que trasladar mi contenido clave por clave?">
+No. Ejecuta `npx intlayer extract` e Intlayer lee tus componentes, extrae las cadenas visibles para el usuario y escribe un archivo `.content` junto a cada uno, para que revises un diff en lugar de copiar cadenas en un catálogo una por una. El paso 12 de esta guía lo explica.
 
-No. Ejecuta `npx intlayer extract` e Intlayer lee tus componentes, extrae las cadenas visibles para el usuario y escribe un archivo `.content` junto a cada uno, así que revisas un diff en lugar de copiar cadenas a un catálogo una por una. El paso 12 de esta guía lo explica paso a paso.
+Para una pipeline completamente automatizada, el [Compilador de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) hace lo mismo en tiempo de compilación: escanea tu fuente JSX, TSX, Vue y Svelte en cada cambio, genera los diccionarios y los mantiene sincronizados a través del reemplazo de módulo en caliente, por lo que no hay claves que mantener manualmente en absoluto.
 
-Para una canalización totalmente automatizada, el [compilador de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) hace lo mismo en tiempo de compilación: escanea tu código JSX, TSX, Vue y Svelte en cada cambio, genera los diccionarios y los mantiene sincronizados mediante el reemplazo de módulos en caliente, así que no hay ninguna clave que mantener a mano.
-
-Conviene conocer dos límites antes de activar el compilador. Funciona por análisis estático, así que las cadenas que solo existen en tiempo de ejecución, como los códigos de error de la API o los campos del CMS, quedan fuera de su alcance. Y tiene que distinguir el texto visible para el usuario de la lógica de la aplicación, como `className="active"` o un código de estado, lo que requiere unas pocas anotaciones en una base de código grande. El [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) evita ambos manteniéndote en el proceso.
+Hay dos límites que vale la pena conocer antes de activar el compilador. Funciona mediante análisis estático, por lo que las cadenas que solo existen en tiempo de ejecución, como códigos de error de API o campos de CMS, quedan fuera de alcance. Y tiene que distinguir el texto visible para el usuario de la lógica de la aplicación como `className="active"` o un código de estado, lo que requiere algunas anotaciones en una base de código grande. El [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) evita ambas cosas manteniéndote en el ciclo.
 
 </Question>
-
-<Question title="¿Qué herramientas para editores y agentes de IA están disponibles?">
+<Question title="¿Qué herramientas de editor e IA están disponibles?">
 
 Cinco piezas, todas opcionales:
 
-- **[Extensión de VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)**: salta de una clave `useIntlayer` al archivo de contenido que la declara, extrae contenido de un componente y ejecuta build, fill, test, push y pull desde la paleta de comandos o desde una pestaña de Intlayer dedicada.
-- **[Servidor LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**: el mismo conocimiento en cualquier editor que hable LSP, con ir a la definición, buscar todas las referencias, vistas previas al pasar el cursor de un valor traducido, autocompletado de claves y campos, y un aviso cuando una clave no está declarada en ninguna parte. También resuelve las llamadas a `i18next`, `react-i18next`, `next-intl` y `use-intl`, lo que ayuda durante la migración.
-- **[Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**: expone la documentación y la CLI de Intlayer a Cursor, VS Code, Claude Desktop, Claude Code y ChatGPT, para que un asistente responda a partir de la documentación actual en lugar de adivinar, y pueda ejecutar comandos como `intlayer fill` por sí mismo.
-- **[Habilidades para agentes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**: habilidades específicas como `intlayer-config`, `intlayer-cli` e `intlayer-content`, además de una por framework, que enseñan a un agente tu configuración de enrutamiento y los tipos de nodo de contenido.
-- **[Plugin de ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/eslint.md)**: `no-raw-text` marca las cadenas codificadas de forma fija, con reglas adicionales para claves de diccionario estáticas y contenido sin usar.
+- **[Extensión de VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)**: salta de una clave de `useIntlayer` al archivo de contenido que la declara, extrae contenido de un componente y ejecuta compilar, llenar, probar, push y pull desde la paleta de comandos o una pestaña dedicada de Intlayer.
+- **[Servidor LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**: la misma conciencia en cualquier editor que hable LSP, con ir a definición, encontrar todas las referencias, vistas previas al pasar sobre un valor traducido, autocompleción de claves y campos, y una advertencia cuando una clave no se declara en ninguna parte. También resuelve llamadas a `i18next`, `react-i18next`, `next-intl` y `use-intl`, lo que ayuda mientras migras.
+- **[Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**: expone la documentación y CLI de Intlayer a Cursor, VS Code, Claude Desktop, Claude Code y ChatGPT, por lo que un asistente responde desde documentos actuales en lugar de adivinar, y puede ejecutar comandos como `intlayer fill` por sí mismo.
+- **[Habilidades de agente](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**: habilidades enfocadas como `intlayer-config`, `intlayer-cli` e `intlayer-content`, más una por framework, que enseñan a un agente tu configuración de enrutamiento y los tipos de nodos de contenido.
+- **[Plugin ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/eslint.md)**: `no-raw-text` marca cadenas codificadas, con más reglas para claves de diccionario estáticas y contenido no utilizado.
 
 </Question>
+<Question title="¿Cómo agrego un segmento de localidad a mis rutas?">
 
-<Question title="¿Cómo añado un segmento de idioma a mis rutas?">
-
-Declara un segmento `:locale` en tu árbol de rutas y deja que Intlayer lo resuelva. `validatePrefix` te indica si el segmento es un idioma declarado, así que un prefijo desconocido devuelve un 404 en lugar de renderizar una página duplicada, y `getLocalizedUrl` reescribe cualquier ruta al idioma de destino. Si usas rutas del sistema de archivos, sigue la [variante de rutas del sistema de archivos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_react_router_v7_fs_routes.md) de esta guía.
+Declara un segmento `:locale` en tu árbol de rutas y deja que Intlayer lo resuelva. `validatePrefix` te dice si el segmento es una localidad declarada, por lo que un prefijo desconocido devuelve un 404 en lugar de renderizar una página duplicada, y `getLocalizedUrl` reescribe cualquier ruta al idioma de destino. Si utilizas rutas del sistema de archivos, prepend el segmento dinámico `($locale)` en tus nombres de archivo de ruta.
 
 </Question>
+<Question title="¿Tengo que poner la localidad en la URL?">
 
-<Question title="¿Tengo que poner el idioma en la URL?">
-
-No. `routing.mode` acepta `"prefix-no-default"` (el valor por defecto), `"prefix-all"`, `"no-prefix"` y `"search-params"`, y `routing.domains` asigna un idioma a su propio dominio. El idioma se conserva en una cookie en cualquier caso. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+No. `routing.mode` acepta `"prefix-no-default"` (el predeterminado), `"prefix-all"`, `"no-prefix"` y `"search-params"`, y `routing.domains` mapea una localidad a su propio dominio. La localidad se persiste en una cookie de cualquier forma. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
 </Question>
-
 <Question title="¿Funciona con React Router en modo framework, con SSR y loaders?">
 
-Sí. El contenido se resuelve durante el renderizado en el servidor, y el idioma activo está disponible en los loaders y las actions, así que los datos del servidor se pueden localizar en la misma pasada que la página. La navegación del cliente mantiene el idioma sin una recarga completa.
+Sí. El contenido se resuelve durante la renderización del servidor, y la localidad activa está disponible en los loaders y actions, por lo que los datos del servidor se pueden localizar en el mismo paso que la página. La navegación del cliente mantiene la localidad sin una recarga completa.
 
 </Question>
+<Question title="¿Cómo agrego etiquetas hreflang para SEO?">
 
-<Question title="¿Cómo añado etiquetas hreflang para SEO?">
-
-Construye el mapa de alternativas con `getMultilingualUrls` y emítelo desde el `meta` o `links` de tu ruta, incluyendo una entrada `x-default`. La misma utilidad alimenta un `sitemap.xml` localizado.
+Construye el mapa de alternativas con `getMultilingualUrls` y emítelo desde tu exportación de ruta `meta` o `links`, incluida una entrada `x-default`. El mismo ayudante alimenta un `sitemap.xml` localizado.
 
 </Question>
+<Question title="¿Cómo construyo un selector de idioma que se mantenga en la página actual?">
 
-<Question title="¿Cómo creo un selector de idioma que permanezca en la página actual?">
-
-Usa `useLocale` para los idiomas activo y disponibles, y `getLocalizedUrl` para traducir la ruta actual al idioma de destino. El usuario permanece en la misma ruta en lugar de ser devuelto a la página de inicio, lo que además evita perder la posición del scroll y los parámetros de consulta.
+Usa `useLocale` para las localidades activas y disponibles, y `getLocalizedUrl` para traducir la ruta actual a la localidad de destino. El usuario permanece en la misma ruta en lugar de ser enviado de vuelta a la página de inicio, lo que también evita perder la posición de desplazamiento y los parámetros de consulta.
 
 </Question>
-
 <Question title="¿Cómo traduzco la aplicación automáticamente con IA?">
 
-Ejecuta `npx intlayer fill`, que rellena las traducciones que faltan con el LLM de tu elección usando tu propio proveedor y tu clave de API. Consulta el [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/fill.md) y la [integración de CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/CI_CD.md).
+Ejecuta `npx intlayer fill`, que completa las traducciones faltantes con el LLM de tu elección usando tu proveedor y clave de API. Consulta el [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/fill.md) e [integración de CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/CI_CD.md).
 
 </Question>
+<Question title="¿Intlayer soporta plurales, género y texto enriquecido?">
 
-<Question title="¿Intlayer admite plurales, género y texto enriquecido?">
-
-Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plurial.md), [contenido según el género](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/gender.md), condiciones, [inserciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/markdown.md), y [formateadores](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/formatters.md) para números, fechas y monedas.
+Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plurial.md), [contenido basado en género](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/gender.md), condiciones, [inserciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/markdown.md), y [formateadores](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/formatters.md) para números, fechas y monedas.
 
 </Question>
-
 <Question title="¿Cómo pueden los traductores editar el contenido sin tocar el código?">
 
-A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) autoalojado o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
+A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) autohospedado o el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin una implementación.
 
 </Question>
-
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 
-Sí, bajo la licencia Apache 2.0, uso comercial incluido. El CMS alojado es un servicio de pago opcional que también puede [autoalojarse](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).
+Sí, bajo la licencia Apache 2.0, incluyendo el uso comercial. El CMS alojado es un servicio de pago opcional que también puede [ser autohospedado](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).
 
 </Question>