@intlayer/docs 9.4.4 → 9.5.0

package/blog/es/nextjs-multilingual-seo-comparison.md

@@ -26,8 +26,6 @@ Si tu aplicación multilingüe de Next.js no indica a los motores de búsqueda c
 
 En este blog, exploraremos **por qué la i18n es un superpoder para el SEO** y cómo implementarla correctamente en Next.js con `next-intl`, `next-i18next` e `Intlayer`.
 
----
-
 ## Por qué SEO e i18n
 
 Agregar idiomas no es solo una cuestión de experiencia de usuario (UX). También es una palanca poderosa para la **visibilidad orgánica**. Aquí te explicamos por qué:
@@ -37,8 +35,6 @@ Agregar idiomas no es solo una cuestión de experiencia de usuario (UX). Tambié
 3. **Mejor UX:** Los visitantes aterrizan inmediatamente en la versión correcta de tu sitio.
 4. **Ventaja competitiva:** Pocos sitios implementan bien el SEO multilingüe, lo que significa que puedes destacar.
 
----
-
 ## Mejores prácticas para el SEO multilingüe en Next.js
 
 Aquí tienes una lista de verificación que toda aplicación multilingüe debería implementar:
@@ -57,8 +53,6 @@ Aquí tienes una lista de verificación que toda aplicación multilingüe deber
 
 Estos son pasos simples, pero omitirlos puede costarte visibilidad.
 
----
-
 ## Ejemplos de implementación
 
 Los desarrolladores a menudo olvidan referenciar correctamente sus páginas entre locales, así que veamos cómo funciona esto en la práctica con diferentes bibliotecas.
@@ -344,14 +338,10 @@ export default robots;
   </Tab>
 </Tabs>
 
----
-
 ## Audita tu sitio web con Intlayer SEO Scanner
 
 Para asegurarte de que tu aplicación multilingüe esté perfectamente optimizada, recomendamos utilizar el [Intlayer SEO Scanner](https://intlayer.org/i18n-seo-scanner). Es una herramienta especializada en la comprobación de sitios web multilingües que te ayuda a identificar etiquetas hreflang faltantes, enlaces rotos y otros problemas de SEO en todas tus páginas localizadas.
 
----
-
 ## Conclusión
 
 Hacer bien la i18n en Next.js no se trata solo de traducir texto, sino de asegurarse de que los motores de búsqueda y los usuarios sepan exactamente qué versión de tu contenido mostrar.

package/blog/es/rag_powered_documentation_assistant.md

@@ -71,7 +71,6 @@ A grandes rasgos, esta es la receta que usé:
 6.  **Registro de consultas para retroalimentación** Cada consulta del usuario se almacena. Esto es oro para entender puntos problemáticos, documentación faltante o nuevas oportunidades.
 
 <Steps>
-
 <Step number={1} title="Leer la documentación">
 
 El primer paso fue simple: necesitaba una forma de escanear una carpeta docs/ para todos los archivos .md. Usando Node.js y glob, obtuve el contenido de cada archivo Markdown en memoria.
@@ -79,7 +78,6 @@ El primer paso fue simple: necesitaba una forma de escanear una carpeta docs/ pa
 Esto mantiene la canalización flexible: en lugar de Markdown, podrías obtener documentos de una base de datos, un CMS o incluso una API.
 
 </Step>
-
 <Step number={2} title="Dividir la Documentación en Fragmentos">
 
 ¿Por qué dividir en fragmentos? Porque los modelos de lenguaje tienen **límites de contexto**. Alimentarlos con un libro entero de documentación no funcionará.
@@ -99,7 +97,6 @@ Este compromiso (tamaño del fragmento vs superposición) es clave para la efici
 - Demasiado grande → explotas el tamaño del contexto.
 
 </Step>
-
 <Step number={3} title="Generación de Embeddings">
 
 Una vez que los documentos están fragmentados, generamos **embeddings**, vectores de alta dimensión que representan cada fragmento.
@@ -119,7 +116,6 @@ Usé el modelo text-embedding-3-large de OpenAI, pero podrías usar cualquier mo
 Cada vector es una huella matemática del texto, que permite la búsqueda por similitud.
 
 </Step>
-
 <Step number={4} title="Indexación y Almacenamiento de Embeddings">
 
 Para evitar regenerar embeddings múltiples veces, los almacené en embeddings.json.
@@ -134,7 +130,6 @@ En producción, probablemente querrás una base de datos vectorial como:
 Las bases de datos vectoriales manejan la indexación, escalabilidad y búsqueda rápida. Pero para mi prototipo, un JSON local funcionó bien.
 
 </Step>
-
 <Step number={5} title="Recuperación con Similitud del Coseno">
 
 Cuando un usuario hace una pregunta:
@@ -148,7 +143,6 @@ La similitud del coseno mide el ángulo entre dos vectores. Una coincidencia per
 De esta manera, el sistema encuentra los pasajes del documento más cercanos a la consulta.
 
 </Step>
-
 <Step number={6} title="Aumento + Generación">
 
 Ahora viene la magia. Tomamos los fragmentos principales y los inyectamos en el **prompt del sistema** para ChatGPT.
@@ -158,7 +152,6 @@ Eso significa que el modelo responde como si esos fragmentos fueran parte de la
 El resultado: respuestas precisas y **basadas en la documentación**.
 
 </Step>
-
 <Step number={7} title="Registro de Consultas de Usuarios">
 
 Este es el superpoder oculto.
@@ -173,7 +166,6 @@ Cada pregunta realizada se almacena. Con el tiempo, construyes un conjunto de da
 Esto convierte a tu asistente RAG en una **herramienta continua de investigación de usuarios**.
 
 </Step>
-
 <Step number={8} title="¿Cuánto Cuesta?">
 
 Una objeción común a RAG es el costo. En la práctica, es sorprendentemente barato:
@@ -185,7 +177,6 @@ Una objeción común a RAG es el costo. En la práctica, es sorprendentemente ba
 Además de eso, puedes incluir el costo de alojamiento.
 
 </Step>
-
 <Step number={9} title="Detalles de Implementación">
 
 Stack:
@@ -251,7 +242,6 @@ Experimentamos con gpt-5, pero la latencia era demasiado alta (a veces hasta 15
 👉 [Prueba la demo aquí](https://intlayer.org/doc/why) 👉 [Consulta la plantilla de código en GitHub](https://github.com/aymericzip/smart_doc_RAG)
 
 </Step>
-
 <Step number={10} title="Ir más allá">
 
 Este proyecto es una implementación mínima. Pero puedes ampliarlo de muchas maneras:
@@ -265,7 +255,6 @@ Este proyecto es una implementación mínima. Pero puedes ampliarlo de muchas ma
 - Mejora en el prompting → reordenamiento, filtrado y búsqueda híbrida (palabra clave + semántica)
 
 </Step>
-
 <Step number={11} title="Limitaciones que hemos encontrado">
 
 - La segmentación y el solapamiento son empíricos. El equilibrio correcto (tamaño del fragmento, porcentaje de solapamiento, número de fragmentos recuperados) requiere iteración y pruebas.
@@ -273,7 +262,6 @@ Este proyecto es una implementación mínima. Pero puedes ampliarlo de muchas ma
 - En este prototipo, los embeddings se almacenan en JSON. Esto funciona para demostraciones pero contamina Git. En producción, es mejor usar una base de datos o un almacén vectorial dedicado.
 
 </Step>
-
 <Step number={12} title="Por qué esto importa más allá de la documentación">
 
 La parte interesante no es solo el chatbot. Es el **bucle de retroalimentación**.
@@ -295,13 +283,11 @@ Imagina lanzar una nueva función y ver instantáneamente:
 Eso es **inteligencia de producto** directamente de tus usuarios.
 
 </Step>
-
 <Step number={13} title="Conclusión">
 
 - En este prototipo, los embeddings se almacenan en JSON. Esto funciona para demostraciones pero contamina Git. En producción, es mejor usar una base de datos o un almacén vectorial dedicado.
 
 </Step>
-
 <Step number={14} title="Por qué esto importa más allá de la documentación">
 
 La parte interesante no es solo el chatbot. Es el **ciclo de retroalimentación**.
@@ -323,7 +309,6 @@ Imagina lanzar una nueva función y ver instantáneamente:
 Eso es **inteligencia de producto** directamente de tus usuarios.
 
 </Step>
-
 <Step number={15} title="Conclusión">
 
 RAG es una de las formas más simples y poderosas de hacer que los LLMs sean prácticos. Al combinar **recuperación + generación**, puedes convertir documentos estáticos en un **asistente inteligente** y, al mismo tiempo, obtener un flujo continuo de información sobre el producto.

package/blog/es/react-i18next_vs_react-intl_vs_intlayer.md

@@ -35,16 +35,12 @@ Evaluamos:
 
 > **resumen**: Los tres pueden localizar una aplicación React. Si quieres **contenido con alcance por componente**, **tipos estrictos en TypeScript**, **verificaciones de claves faltantes en tiempo de compilación**, **diccionarios optimizados por tree-shaking** y herramientas editoriales integradas (Editor Visual/CMS + traducción asistida por IA opcional), **Intlayer** es la opción más completa para bases de código React modulares.
 
----
-
 ## Posicionamiento a alto nivel
 
 - **react-intl** - Formateo basado en ICU y alineado con estándares (fechas/números/plurales) con una API madura. Los catálogos suelen estar centralizados; la seguridad de las claves y la validación en tiempo de compilación dependen en gran medida de ti.
 - **react-i18next** - Extremadamente popular y flexible; namespaces, detectores y muchos plugins (ICU, backends). Potente, pero la configuración puede expandirse a medida que los proyectos crecen.
 - **Intlayer** - Modelo de contenido centrado en componentes para React, **tipado estricto en TS**, **verificaciones en tiempo de compilación**, **tree-shaking**, además de **Editor Visual/CMS** y **traducciones asistidas por IA**. Funciona con React Router, Vite, CRA, etc.
 
----
-
 ## Matriz de características (enfoque React)
 
 | Característica                                                   | `react-intlayer` (Intlayer)                                                                                                                      | `react-i18next` (i18next)                                                                                                             | `react-intl` (FormatJS)                                                                                            |
@@ -69,8 +65,6 @@ Evaluamos:
 | **Eliminación de contenido no usado**                            | ✅ Sí, por diccionario en tiempo de compilación                                                                                                  | ❌ No, solo mediante segmentación manual de namespaces                                                                                | ❌ No, todos los mensajes declarados se incluyen en el paquete                                                     |
 | **Gestión de Proyectos Grandes**                                 | ✅ Fomenta la modularidad, adecuado para sistemas de diseño                                                                                      | ⚠️ Requiere buena disciplina en los archivos                                                                                          | ⚠️ Los catálogos centrales pueden volverse grandes                                                                 |
 
----
-
 ## Comparación detallada
 
 ### 1) Arquitectura y escalabilidad
@@ -80,8 +74,6 @@ Evaluamos:
 
 **Por qué importa:** El contenido modular refleja una interfaz modular. Las grandes bases de código React se mantienen más limpias cuando las traducciones conviven con los componentes a los que pertenecen.
 
----
-
 ### 2) TypeScript y seguridad
 
 - **react-intl**: Tipados sólidos, pero **sin tipado automático de claves**; debes aplicar los patrones de seguridad tú mismo.
@@ -90,8 +82,6 @@ Evaluamos:
 
 **Por qué es importante:** Mover los fallos hacia la **izquierda** (a la compilación/CI) reduce problemas en producción y acelera los ciclos de retroalimentación para los desarrolladores.
 
----
-
 ### 3) Manejo de traducciones faltantes
 
 - **react-intl / react-i18next**: Por defecto usan **respaldo en tiempo de ejecución** (eco de la clave o idioma predeterminado). Puedes agregar linting/plugins, pero no está garantizado en la compilación.
@@ -99,8 +89,6 @@ Evaluamos:
 
 **Por qué es importante:** Que la CI falle por cadenas faltantes evita que “inglés misterioso” se filtre en interfaces no inglesas.
 
----
-
 ### 4) Contenido enriquecido y formato
 
 - **react-intl**: Excelente soporte **ICU** para plurales, selectores, fechas/números y composición de mensajes. Se puede usar JSX, pero el modelo mental sigue siendo centrado en el mensaje.
@@ -109,8 +97,6 @@ Evaluamos:
 
 **Por qué es importante:** Los textos complejos de la interfaz de usuario (enlaces, partes en negrita, componentes en línea) son más fáciles cuando la biblioteca integra nodos React de forma limpia.
 
----
-
 ### 5) Rendimiento y comportamiento de carga
 
 - **react-intl / react-i18next**: Normalmente gestionas el **división de catálogos** y la **carga diferida** manualmente (espacios de nombres/importaciones dinámicas). Efectivo pero requiere disciplina.
@@ -118,8 +104,6 @@ Evaluamos:
 
 **Por qué importa:** Paquetes más pequeños y menos cadenas no usadas mejoran el rendimiento de inicio y navegación.
 
----
-
 ### 6) DX, herramientas y mantenimiento
 
 - **react-intl / react-i18next**: Ecosistema comunitario amplio; para flujos editoriales usualmente adoptas plataformas de localización externas.
@@ -127,24 +111,18 @@ Evaluamos:
 
 **Por qué es importante:** Las herramientas integradas acortan el ciclo entre desarrolladores y autores de contenido - menos código de unión, menos dependencias de proveedores.
 
----
-
 ## ¿Cuándo elegir cuál?
 
 - **Elige react-intl** si quieres un formateo de mensajes **priorizando ICU** con una API sencilla y alineada con estándares, y tu equipo está cómodo manteniendo catálogos y verificaciones de seguridad manualmente.
 - **Elige react-i18next** si necesitas la **amplitud del ecosistema de i18next** (detectores, backends, plugin ICU, integraciones) y aceptas más configuración para ganar flexibilidad.
 - **Elige Intlayer** si valoras el **contenido acotado por componente**, **TypeScript estricto**, **garantías en tiempo de compilación**, **tree-shaking** y herramientas editoriales **incluidas por defecto**, especialmente para aplicaciones React **grandes y modulares**.
 
----
-
 ## Interoperabilidad con `react-intl` y `react-i18next`
 
 `intlayer` también puede ayudarte a gestionar tus namespaces de `react-intl` y `react-i18next`.
 
 Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i18n favorita, e intlayer generará tus namespaces en la ubicación que elijas (ejemplo: `/messages/{{locale}}/{{namespace}}.json`).
 
----
-
 ## Notas prácticas para la migración (react-intl / react-i18next → Intlayer)
 
 - **Migra de forma incremental**: Comienza con una funcionalidad o ruta; mantén los catálogos heredados en paralelo durante la transición.
@@ -152,8 +130,6 @@ Usando `intlayer`, puedes declarar tu contenido en el formato de tu librería i1
 - **Activa verificaciones estrictas**: Permite que los errores en tiempo de compilación detecten claves/locales faltantes temprano en CI.
 - **Mide los bundles**: Espera reducciones a medida que se eliminan cadenas no usadas.
 
----
-
 ## Conclusión
 
 Las tres bibliotecas localizan React de manera efectiva. La diferencia radica en cuánto **infraestructura** debes construir para alcanzar una configuración **segura y escalable**:

package/blog/es/transform_existing_nextjs_app_using_compiler.md

@@ -0,0 +1,294 @@
+---
+createdAt: 2026-01-10
+updatedAt: 2026-09-06
+title: "Cómo hacer multilingüe (i18n) una aplicación Next.js existente después (Guía i18n 2026)"
+description: "La guía de 2026 para hacer multilingüe (i18n) una aplicación Next.js existente sin refactorizaciones tediosas. Descubre la extracción automática, traducción con IA y enrutamiento de alto rendimiento con Intlayer."
+keywords:
+  - Next.js i18n
+  - Internacionalización
+  - Traducir aplicación Next.js existente
+  - Next.js 16
+  - Intlayer
+  - Multilingüe
+  - React i18n
+  - Compilador
+  - Traducción IA
+  - SEO
+slugs:
+  - blog
+  - transform-existing-nextjs-app-into-multilingual-app
+applicationTemplate: https://github.com/aymericzip/intlayer-next-no-lolale-path-template
+youtubeVideo: https://www.youtube.com/watch?v=e_PPG7PTqGU
+history:
+  - version: 9.4.0
+    date: 2026-08-22
+    changes: "Update to Next.js >= 9.4.0 architecture"
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
+  - version: 8.2.0
+    date: 2026-03-09
+    changes: "Update compiler options, add FilePathPattern support"
+  - version: 8.1.6
+    date: 2026-02-23
+    changes: "Initial release"
+author: aymericzip
+---
+
+# Cómo hacer multilingüe (i18n) una aplicación Next.js existente después (Guía i18n 2026)
+
+Añadir internacionalización (i18n) a un proyecto Next.js desde el primer día es relativamente sencillo. Pero, ¿qué ocurre cuando ya tienes una aplicación Next.js madura y en producción construida en un solo idioma y necesitas hacerla multilingüe **después**?
+
+Si alguna vez has intentado esto con bibliotecas tradicionales como `next-intl` o `next-i18next`, conoces la pesadilla:
+
+- Buscar manualmente cadenas de texto hardcodeadas en cientos de archivos JSX/TSX.
+- Crear manualmente archivos JSON anidados e inventar claves de traducción arbitrarias (`pages.dashboard.header.title`, etc.).
+- Reemplazar el texto JSX con llamadas a hooks de traducción (`t('...')`).
+- Reestructurar toda tu carpeta `app/` en `app/[locale]/...`, rompiendo rutas existentes, marcadores e indexación en motores de búsqueda.
+
+En 2026, no necesitas reescribir tu base de código para hacer multilingüe tu aplicación Next.js. Con **Intlayer**, puedes adaptar la internacionalización a una aplicación Next.js existente en minutos, mediante extracción automatizada, traducción asistida por IA y enrutamiento no invasivo.
+
+> ¿Buscas la guía técnica completa paso a paso para Next.js 16 App Router? Consulta nuestra documentación dedicada: [Traducir Next.js 16 con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_16.md).
+
+## Tabla de Contenidos
+
+<TOC/>
+
+## El dilema de la adaptación: Por qué internacionalizar una aplicación existente es difícil
+
+Al internacionalizar una aplicación Next.js existente, los desarrolladores se enfrentan a tres grandes obstáculos:
+
+1. **Disrupción en la base de código**: Extraer cadenas manualmente a diccionarios JSON requiere modificar casi todos los archivos de componentes, lo que genera grandes diffs de git y riesgo de regresiones.
+2. **Imposición de enrutamiento**: Las bibliotecas i18n tradicionales suelen obligarte a mover tu layout raíz y páginas a un segmento dinámico `[locale]` (ej. `/app/[locale]/page.tsx`). Para una aplicación establecida, esto altera middlewares, rutas relativas e integraciones.
+3. **Trabajo tedioso de traducción**: Una vez extraídas las cadenas, traducir diccionarios a 5, 10 o 20 idiomas requiere copiar y pegar sin fin o contratar costosos servicios de gestión de traducción.
+
+Intlayer resuelve estos problemas a nivel arquitectónico mediante **extracción asistida por compilador**, **diccionarios declarativos** y **enrutamiento flexible**.
+
+## Extracción automatizada de contenido (sin búsqueda manual)
+
+### Opción A: El extractor por CLI (`npx intlayer extract`)
+
+Puedes ejecutar la herramienta de extracción de Intlayer directamente en tu proyecto:
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+Este comando analiza tus componentes React, extrae las cadenas visibles para el usuario y genera automáticamente archivos de declaración de contenido (`.content.ts`) junto a tus componentes. La lógica de tus componentes se mantiene declarativa, limpia y totalmente tipada.
+
+### Opción B: El compilador Intlayer (Extracción en tiempo de compilación)
+
+Con el compilador de Intlayer habilitado en tu configuración, puedes seguir escribiendo tus componentes con texto plano en tu idioma por defecto. Al compilar, el compilador extrae el texto e inyecta el contenido localizado automáticamente:
+
+```tsx fileName="src/app/page.tsx"
+// Write normal React code. The compiler extracts the text automatically
+export default function HomePage() {
+  return (
+    <section>
+      <h1>Welcome to our platform</h1>
+      <p>Start exploring our modern features today.</p>
+    </section>
+  );
+}
+```
+
+En segundo plano, Intlayer construye el diccionario y vincula el componente a su contenido localizado, eliminando por completo la refactorización manual.
+
+En este caso, generará un archivo `src/app/page.content.ts` con el siguiente contenido:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+    }),
+  },
+};
+
+export default content;
+```
+
+## Traducción con IA con tu LLM favorito
+
+Una vez extraído el contenido, traducirlo a decenas de idiomas no debería tomar días. Intlayer incluye una CLI de traducción con IA integrada con OpenAI, Anthropic, DeepSeek o Mistral utilizando tus propias claves de API:
+
+```bash packageManager="npm"
+npx intlayer fill
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer fill
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer fill
+```
+
+```bash packageManager="bun"
+bunx intlayer fill
+```
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
+    defaultLocale: Locales.ENGLISH,
+  },
+  ai: {
+    provider: "openai",
+    model: "gpt-4o-mini",
+    apiKey: process.env.OPENAI_API_KEY,
+    applicationContext:
+      "Panel SaaS para productividad y colaboración de equipos",
+  },
+};
+
+export default config;
+```
+
+Ejecutar `npx intlayer fill` completa tus declaraciones `.content.ts` con las traducciones para las locales configuradas:
+
+```typescript fileName="src/app/page.content.ts"
+import { Dictionary } from "intlayer";
+
+const content = {
+  key: "home-page",
+  content: {
+    welcomeToOurPlatform: t({
+      en: "Welcome to our platform",
+      fr: "Bienvenue sur notre plateforme",
+      es: "Bienvenido a nuestra plataforma",
+      de: "Willkommen auf unserer Plattform",
+    }),
+    startExploringOurModernFeaturesToday: t({
+      en: "Start exploring our modern features today.",
+      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
+      es: "Comience a explorar nuestras funciones modernas hoy.",
+      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
+    }),
+  },
+};
+
+export default content;
+```
+
+Dado que Intlayer proporciona un `applicationContext` global al LLM, las traducciones generadas preservan los matices técnicos, la voz de la marca y el contexto gramatical mucho mejor que las herramientas tradicionales.
+
+Para verificar que no se haya omitido ninguna cadena antes de pasar a producción:
+
+```bash
+npx intlayer test
+```
+
+## Añadir enrutamiento multilingüe sin romper URLs existentes
+
+Uno de los mayores temores al traducir una aplicación existente es tener que rehacer las rutas. Intlayer ofrece múltiples estrategias listas para usar:
+
+- **Modo parámetros de búsqueda / Cookies (`search-params`)**: Mantén exactamente tu estructura de carpetas (`/app/page.tsx`, `/app/dashboard/page.tsx`) sin mover nada a `[locale]`. El cambio de idioma se gestiona por parámetro (`?locale=en`) o cookie.
+- **Modo prefijo (`prefix` / `prefix-all-locales`)**: Cuando desees URLs amigables para SEO (`/es/dashboard`, `/en/dashboard`), Intlayer lo soporta mediante un proxy de Next.js.
+
+Configura tu integración de Next.js en segundos:
+
+```typescript fileName="next.config.ts"
+import type { NextConfig } from "next";
+import { withIntlayer } from "next-intlayer/server";
+
+const nextConfig: NextConfig = {/* Your existing Next.js config */};
+
+export default withIntlayer(nextConfig);
+```
+
+Envuelve tu layout raíz con `IntlayerProvider`:
+
+```tsx fileName="src/app/layout.tsx"
+import type { ReactNode } from "react";
+import { IntlayerProvider } from "next-intlayer";
+import { getLocale } from "next-intlayer/server";
+import { getHTMLTextDir } from "intlayer";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const locale = await getLocale();
+
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <body>
+        <IntlayerProvider defaultLocale={locale}>{children}</IntlayerProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+## SEO multilingüe
+
+Genera metadatos localizados, etiquetas OpenGraph y encabezados `hreflang` para asegurar la visibilidad en motores de búsqueda de todo el mundo:
+
+```tsx fileName="src/app/page.tsx"
+import type { Metadata } from "next";
+import { getLocale } from "next-intlayer/server";
+import { getIntlayer } from "intlayer";
+
+export const generateMetadata = async (): Promise<Metadata> => {
+  const locale = await getLocale();
+  const content = getIntlayer("home-page-metadata", locale);
+
+  return {
+    title: content.title,
+    description: content.description,
+  };
+};
+```
+
+## En detalle: ¿Listo para la implementación paso a paso?
+
+Esta guía proporciona una visión general de cómo añadir internacionalización a una aplicación Next.js existente en 2026 sin complicaciones arquitectónicas. Para seguir la guía técnica detallada paso a paso, incluyendo middleware, generación estática (`generateStaticParams`), sitemaps y Server Components, visita nuestra documentación oficial:
+
+👉 **[Guía completa para traducir Next.js 16 con Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_16.md)**
+
+## Preguntas Frecuentes (FAQ)
+
+<FAQ>
+
+<Question title="¿Puedo hacer que mi aplicación Next.js sea multilingüe sin mover archivos a app/[locale]?">
+
+Sí. Intlayer admite `routing.mode: "search-params"` y detección por cookies o cabeceras HTTP. Puedes mantener intacta tu estructura de carpetas `app/` sin alterar tus URLs actuales.
+
+</Question>
+<Question title="¿Debo reemplazar manualmente todas las cadenas de texto en mi código existente?">
+
+No. Puedes usar `npx intlayer extract` para detectar y extraer automáticamente las cadenas a declaraciones localizadas, o usar el compilador de Intlayer para transformar los componentes en tiempo de compilación.
+
+</Question>
+<Question title="¿Cómo reduce Intlayer el tamaño del bundle de Next.js en comparación con next-intl o next-i18next?">
+
+Intlayer utiliza definiciones de diccionario por componente y optimización por macros. El cliente solo recibe los campos necesarios para los componentes renderizados, y los Server Components se ejecutan en el servidor con cero sobrecarga en el cliente.
+
+</Question>
+<Question title="¿Puedo usar IA para traducir automáticamente mis componentes a múltiples idiomas?">
+
+Sí. El comando `npx intlayer fill` de Intlayer se conecta a tu proveedor de IA preferido (OpenAI, Anthropic, Mistral, DeepSeek) para generar traducciones contextuales de los idiomas faltantes en todo tu proyecto.
+
+</Question>
+</FAQ>