@intlayer/docs 5.8.0-canary.0 → 5.8.0

package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md

@@ -1,14 +1,14 @@
 ---
-createdAt: 2024-08-11
-updatedAt: 2025-06-29
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
 title: next-i18next vs next-intl vs Intlayer
-description: Comparar next-i18next con next-intl y Intlayer para la internacionalización (i18n) de una aplicación Next.js
+description: Comparación de next-i18next con next-intl e Intlayer para la internacionalización (i18n) de una aplicación Next.js
 keywords:
   - next-intl
   - next-i18next
   - Intlayer
   - Internacionalización
-  - Blogumentación
+  - Blog
   - Next.js
   - JavaScript
   - React
@@ -17,269 +17,146 @@ slugs:
   - next-i18next-vs-next-intl-vs-intlayer
 ---
 
-# next-i18next VS next-intl VS Intlayer | Next.js Internacionalización (i18n)
+# next-i18next VS next-intl VS intlayer | Internacionalización (i18n) en Next.js
 
-A continuación se presenta una comparación concisa de **tres bibliotecas populares** para la internacionalización (i18n) de una aplicación Next.js: **next-intl**, **next-i18next** e **Intlayer**.
+Esta guía compara tres opciones de i18n ampliamente utilizadas para **Next.js**: **next-intl**, **next-i18next** e **Intlayer**.
+Nos centramos en **Next.js 13+ App Router** (con **React Server Components**) y evaluamos:
 
-Este documento destaca criterios clave:
+1. **Arquitectura y organización del contenido**
+2. **TypeScript y seguridad**
+3. **Manejo de traducciones faltantes**
+4. **Enrutamiento y middleware**
+5. **Rendimiento y comportamiento de carga**
+6. **Experiencia del desarrollador (DX), herramientas y mantenimiento**
+7. **SEO y escalabilidad para proyectos grandes**
 
-1. **Arquitectura** (manteniendo las traducciones cerca de sus componentes)
-2. **Soporte para TypeScript**
-3. **Gestión de traducciones faltantes**
-4. **Soporte para Componentes del Servidor**
-5. **Enrutamiento mejorado y middleware** para Next.js
-6. **Simplicidad de configuración**
-
-La guía también proporciona una **visión detallada de Intlayer**, mostrando por qué puede ser una opción sólida, especialmente para Next.js 13+, incluyendo **App Router** y **Componentes del Servidor**.
+> **resumen**: Los tres pueden localizar una aplicación Next.js. Si deseas **contenido con alcance por componente**, **tipos estrictos en TypeScript**, **verificaciones de claves faltantes en tiempo de compilación**, **diccionarios optimizados por tree-shaking** y **helpers de App Router y SEO de primera clase**, **Intlayer** es la opción más completa y moderna.
 
 ---
 
-## Descripción general de cada biblioteca
-
-### 1. next-intl
+## Posicionamiento a alto nivel
 
-**Enfoque principal**: Configuración rápida y fácil con un enfoque ligero para la localización.
+- **next-intl** - Formateo de mensajes ligero y sencillo con soporte sólido para Next.js. Los catálogos centralizados son comunes; la experiencia del desarrollador (DX) es simple, pero la seguridad y el mantenimiento a gran escala siguen siendo principalmente tu responsabilidad.
+- **next-i18next** - i18next con la apariencia de Next.js. Ecosistema maduro y características mediante plugins (por ejemplo, ICU), pero la configuración puede ser extensa y los catálogos tienden a centralizarse a medida que los proyectos crecen.
+- **Intlayer** - Modelo de contenido centrado en componentes para Next.js, **tipado estricto en TS**, **verificaciones en tiempo de compilación**, **tree-shaking**, **middleware integrado y helpers de SEO**, **Editor Visual/CMS** opcional y **traducciones asistidas por IA**.
 
-- **Arquitectura**: Fomenta colocar traducciones en una sola carpeta (por ejemplo, `locales/`), pero también permite múltiples estrategias. No impone estrictamente una arquitectura de “traducción por componente”.
-- **Soporte para TypeScript**: Integración básica de TypeScript. Existen algunas definiciones de tipo, pero no se centran en gran medida en la generación automática de definiciones de TypeScript a partir de tus archivos de traducción.
-- **Traducciones faltantes**: Mecanismo de retroceso básico. Por defecto, retrocede a una clave o una cadena de idioma predeterminado. No hay herramientas robustas listas para usar para comprobaciones avanzadas de traducciones faltantes.
-- **Soporte para Componentes del Servidor**: Funciona con Next.js 13+ en general, pero el patrón es menos especializado para un uso profundo del lado del servidor (por ejemplo, componentes del servidor con enrutamiento dinámico complejo).
-- **Enrutamiento y Middleware**: El soporte para middleware es posible, pero limitado. Normalmente, se basa en el `Middleware` de Next.js para la detección de idiomas o configuración manual para reescribir rutas de idiomas.
-- **Simplicidad de configuración**: Muy directo. Se necesita un mínimo de estructura.
+---
 
-**Uso cuando**: Quieres un enfoque más simple o te sientes cómodo gestionando tus traducciones de manera más convencional (como una carpeta con archivos JSON de idiomas).
+## Comparación de características lado a lado (enfocado en Next.js)
+
+| Característica                                                   | `next-intlayer` (Intlayer)                                                                                                                       | `next-intl`                                                                                                                           | `next-i18next`                                                                                                                        |
+| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| **Traducciones Cerca de los Componentes**                        | ✅ Sí, contenido colocalizado con cada componente                                                                                                | ❌ No                                                                                                                                 | ❌ No                                                                                                                                 |
+| **Integración con TypeScript**                                   | ✅ Avanzada, tipos estrictos generados automáticamente                                                                                           | ✅ Buena                                                                                                                              | ⚠️ Básica                                                                                                                             |
+| **Detección de Traducciones Faltantes**                          | ✅ Resaltado de errores en TypeScript y error/advertencia en tiempo de compilación                                                               | ⚠️ Recurso alternativo en tiempo de ejecución                                                                                         | ⚠️ Recurso alternativo en tiempo de ejecución                                                                                         |
+| **Contenido Enriquecido (JSX/Markdown/componentes)**             | ✅ Soporte directo                                                                                                                               | ❌ No diseñado para nodos enriquecidos                                                                                                | ⚠️ Limitado                                                                                                                           |
+| **Traducción impulsada por IA**                                  | ✅ Sí, soporta múltiples proveedores de IA. Usable con tus propias claves API. Considera el contexto de tu aplicación y el alcance del contenido | ❌ No                                                                                                                                 | ❌ No                                                                                                                                 |
+| **Editor Visual**                                                | ✅ Sí, Editor Visual local + CMS opcional; puede externalizar contenido de la base de código; embebible                                          | ❌ No / disponible a través de plataformas externas de localización                                                                   | ❌ No / disponible a través de plataformas externas de localización                                                                   |
+| **Enrutamiento Localizado**                                      | ✅ Sí, soporta rutas localizadas desde el inicio (funciona con Next.js y Vite)                                                                   | ✅ Integrado, App Router soporta el segmento `[locale]`                                                                               | ✅ Integrado                                                                                                                          |
+| **Generación Dinámica de Rutas**                                 | ✅ Sí                                                                                                                                            | ✅ Sí                                                                                                                                 | ✅ Sí                                                                                                                                 |
+| **Pluralización**                                                | ✅ Patrones basados en enumeraciones                                                                                                             | ✅ Bueno                                                                                                                              | ✅ Bueno                                                                                                                              |
+| **Formato (fechas, números, monedas)**                           | ✅ Formateadores optimizados (Intl en el núcleo)                                                                                                 | ✅ Bueno (helpers de Intl)                                                                                                            | ✅ Bueno (helpers de Intl)                                                                                                            |
+| **Formato de contenido**                                         | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml en desarrollo)                                                                                       | ✅ .json, .js, .ts                                                                                                                    | ⚠️ .json                                                                                                                              |
+| **Soporte ICU**                                                  | ⚠️ En desarrollo                                                                                                                                 | ✅ Sí                                                                                                                                 | ⚠️ A través de plugin (`i18next-icu`)                                                                                                 |
+| **Ayudantes SEO (hreflang, sitemap)**                            | ✅ Herramientas integradas: ayudantes para sitemap, robots.txt, metadatos                                                                        | ✅ Bueno                                                                                                                              | ✅ Bueno                                                                                                                              |
+| **Ecosistema / Comunidad**                                       | ⚠️ Más pequeño pero creciendo rápido y reactivo                                                                                                  | ✅ Mediano, enfocado en Next.js                                                                                                       | ✅ Mediano, enfocado en Next.js                                                                                                       |
+| **Renderizado del lado del servidor y Componentes del Servidor** | ✅ Sí, optimizado para SSR / Componentes del Servidor de React                                                                                   | ⚠️ Soportado a nivel de página pero es necesario pasar funciones t en el árbol de componentes para los componentes hijos del servidor | ⚠️ Soportado a nivel de página pero es necesario pasar funciones t en el árbol de componentes para los componentes hijos del servidor |
+| **Tree-shaking (cargar solo contenido usado)**                   | ✅ Sí, por componente en tiempo de compilación mediante plugins de Babel/SWC                                                                     | ⚠️ Parcial                                                                                                                            | ⚠️ Parcial                                                                                                                            |
+| **Carga diferida**                                               | ✅ Sí, por localización / por diccionario                                                                                                        | ✅ Sí (por ruta/por localización), requiere gestión de espacios de nombres                                                            | ✅ Sí (por ruta/por localización), requiere gestión de espacios de nombres                                                            |
+| **Eliminación de contenido no usado**                            | ✅ Sí, por diccionario en tiempo de compilación                                                                                                  | ❌ No, puede ser gestionado manualmente con gestión de espacios de nombres                                                            | ❌ No, puede ser gestionado manualmente con gestión de espacios de nombres                                                            |
+| **Gestión de Proyectos Grandes**                                 | ✅ Fomenta la modularidad, adecuado para sistemas de diseño                                                                                      | ✅ Modular con configuración                                                                                                          | ✅ Modular con configuración                                                                                                          |
 
 ---
 
-### 2. next-i18next
+## Comparación detallada
 
-**Enfoque principal**: Solución probada en el tiempo utilizando `i18next` en el fondo, ampliamente adoptada para proyectos de Next.js.
+### 1) Arquitectura y escalabilidad
 
-- **Arquitectura**: A menudo organiza traducciones en la carpeta `public/locales`. No está diseñado específicamente para mantener las traducciones “cerca” de cada componente, aunque puedes adoptar manualmente una estructura diferente.
-- **Soporte para TypeScript**: Cobertura razonable de TypeScript, pero requiere configuración personalizada para traducciones tipadas y ganchos tipados.
-- **Traducciones faltantes**: i18next ofrece interpolación/retiros. Sin embargo, la detección de traducciones faltantes normalmente requiere configuración adicional o complementos de terceros.
-- **Soporte para Componentes del Servidor**: Se documenta el uso básico con Next.js 13, pero el uso avanzado (por ejemplo, integración profunda con componentes del servidor, generación de rutas dinámicas) puede ser complicado.
-- **Enrutamiento y Middleware**: Se basa en gran medida en el `Middleware` de Next.js y reescrituras para subrutas de idiomas. Para configuraciones más complejas, es posible que debas profundizar en la configuración avanzada de i18next.
-- **Simplicidad de configuración**: Enfoque familiar para aquellos acostumbrados a i18next. Sin embargo, puede volverse más pesado en boilerplate cuando se necesitan características avanzadas de i18n (nombres de espacio, múltiples idiomas de retroceso, etc.).
+- **next-intl / next-i18next**: Por defecto usan **catálogos centralizados** por localización (más **espacios de nombres** en i18next). Funciona bien al principio, pero a menudo se convierte en una gran área compartida con aumento del acoplamiento y cambios frecuentes en las claves.
+- **Intlayer**: Fomenta diccionarios **por componente** (o por funcionalidad) **ubicados junto** al código al que sirven. Esto reduce la carga cognitiva, facilita la duplicación/migración de piezas de la interfaz y disminuye los conflictos entre equipos. El contenido no utilizado es naturalmente más fácil de detectar y eliminar.
 
-**Uso cuando**: Ya estás comprometido con el ecosistema de `i18next` o tienes traducciones basadas en i18next existentes.
+**Por qué importa:** En bases de código grandes o configuraciones de sistemas de diseño, el **contenido modular** escala mejor que los catálogos monolíticos.
 
 ---
 
-### 3. Intlayer
-
-**Enfoque principal**: Una moderna biblioteca de i18n de código abierto específicamente diseñada para el **App Router** de Next.js (12, 13, 14 y 15) con soporte integrado para **Componentes del Servidor** y **Turbopack**.
+### 2) TypeScript y seguridad
 
-#### Ventajas Clave
+- **next-intl**: Soporte sólido para TypeScript, pero **las claves no están estrictamente tipadas por defecto**; deberás mantener los patrones de seguridad manualmente.
+- **next-i18next**: Tipos base para hooks; **la tipificación estricta de claves requiere herramientas/configuración adicional**.
+- **Intlayer**: **Genera tipos estrictos** a partir de tu contenido. La **autocompletación en el IDE** y los **errores en tiempo de compilación** detectan errores tipográficos y claves faltantes antes del despliegue.
 
-1. **Arquitectura**
+**Por qué es importante:** La tipificación fuerte desplaza las fallas hacia la **izquierda** (CI/compilación) en lugar de hacia la **derecha** (tiempo de ejecución).
 
-   - Fomenta colocar **traducciones justo al lado de sus componentes**. Cada página o componente puede tener su propio archivo `.content.ts` (o JSON): no más rebuscar en una gran carpeta de traducción.
-   - Esto hace que tu código sea más **modular y mantenible**, especialmente en grandes bases de código.
-
-2. **Soporte para TypeScript**
-
-   - **Definiciones de tipo generadas automáticamente**: En el momento en que defines tu contenido, Intlayer genera tipos que potencian la autocompletar y detectan errores de traducción.
-   - Minimiza errores en tiempo de ejecución como claves faltantes y ofrece avanzado **autocompletar** directamente en tu IDE.
-
-3. **Gestión de Traducciones Faltantes**
+---
 
-   - Durante la construcción, Intlayer puede **detectar claves de traducción faltantes** y lanzar advertencias o errores.
-   - Esto asegura que nunca envíes accidentalmente texto faltante entre tus idiomas.
+### 3) Manejo de traducciones faltantes
 
-4. **Optimizado para Componentes del Servidor**
+- **next-intl / next-i18next**: Dependen de **respaldo en tiempo de ejecución** (por ejemplo, mostrar la clave o la configuración regional predeterminada). La compilación no falla.
+- **Intlayer**: **Detección en tiempo de compilación** con **advertencias/errores** para locales o claves faltantes.
 
-   - Totalmente compatible con el **App Router** de Next.js y el nuevo paradigma de **Componentes del Servidor**.
-   - Proporciona proveedores especializados (`IntlayerServerProvider`, `IntlayerClientProvider`) para **separar el contexto del servidor** (vital al tratar con Next.js 13+).
+**Por qué es importante:** Detectar vacíos durante la compilación previene “cadenas misteriosas” en producción y se alinea con políticas estrictas de lanzamiento.
 
-5. **Enrutamiento mejorado y Middleware**
+---
 
-   - Incluye un [**`intlayerMiddleware`**](#) dedicado para **detección automática de idiomas** (a través de cookies o encabezados de navegador) y generación avanzada de rutas.
-   - Maneja dinámicamente rutas localizadas (por ejemplo, `/en-US/about` vs. `/fr/about`) con configuración mínima.
-   - Ofrece métodos de ayuda como `getMultilingualUrls` para generar enlaces de idiomas alternativos (genial para **SEO**).
+### 4) Enrutamiento, middleware y estrategia de URL
 
-6. **Configuración Simplificada**
-   - Un solo archivo de configuración (`intlayer.config.ts`) para definir tus idiomas, idioma predeterminado y preferencias de integración.
-   - Un complemento envolvente `withIntlayer(nextConfig)` que **inyecta** todas las variables de entorno y observadores para tu contenido.
-   - **Sin grandes configuraciones de retroceso**: el sistema está diseñado para "funcionar" de inmediato con mínima fricción.
+- Los tres funcionan con **enrutamiento localizado de Next.js** en el App Router.
+- **Intlayer** va más allá con **middleware i18n** (detección de locale vía headers/cookies) y **helpers** para generar URLs localizadas y etiquetas `<link rel="alternate" hreflang="…">`.
 
-> **En resumen**: Intlayer es una solución moderna que quiere **promover las mejores prácticas**: desde **mantener traducciones cercanas** a cada componente de React, hasta ofrecer **soporte robusto para TS** y uso **fácil del lado del servidor**, mientras **reduce drásticamente el boilerplate**.
+**Por qué es importante:** Menos capas personalizadas; **UX consistente** y **SEO limpio** en todas las locales.
 
 ---
 
-## Comparación de características lado a lado
-
-| **Característica**                                 | **next-intl**                                | **next-i18next**                                       | **Intlayer**                                        |
-| -------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------ | --------------------------------------------------- |
-| **Mantener traducciones cerca de los componentes** | Parcial - típicamente una carpeta de locales | No por defecto - a menudo `public/locales`             | **Sí - recomendado y fácil**                        |
-| **TypeScript Autogenerado**                        | Definiciones de TS básicas                   | Soporte básico de TS                                   | **Sí - avanzado lista para usar**                   |
-| **Detección de traducciones faltantes**            | Principalmente cadenas de retroceso          | Principalmente cadenas de retroceso                    | **Sí - comprobaciones en tiempo de construcción**   |
-| **Soporte para Componentes del Servidor**          | Funciona pero no está especializado          | Soportado pero puede ser verboso                       | **Soporte total con proveedores especializados**    |
-| **Enrutamiento y Middleware**                      | Integrado manualmente con middleware de Next | Proporcionado a través de configuración de reescritura | **Middleware de i18n dedicado + ganchos avanzados** |
-| **Complejidad de configuración**                   | Simple, configuración mínima                 | Tradicional, puede ser verbosa para uso avanzado       | **Un archivo de configuración y complemento**       |
-
----
+### 5) Alineación con Componentes del Servidor (RSC)
 
-## ¿Por qué Intlayer?
+- **Todos** soportan Next.js 13+.
+- **Intlayer** suaviza la **frontera servidor/cliente** con una API consistente y proveedores diseñados para RSC, para que no tengas que pasar formateadores o funciones t a través de árboles de componentes.
 
-Para equipos que migran a o construyen sobre el **Next.js App Router** (versiones 13, 14 o 15) con **Componentes del Servidor**, Intlayer proporciona:
+**Por qué es importante:** Modelo mental más limpio y menos casos límite en árboles híbridos.
 
-1. **Una Arquitectura Simplificada**
+---
 
-   - Cada ruta o componente contiene sus propias traducciones. Esto fomenta claridad y mantenibilidad.
+### 6) Rendimiento y comportamiento de carga
 
-2. **Integración Poderosa de TypeScript**
+- **next-intl / next-i18next**: Control parcial mediante **namespaces** y **divisiones a nivel de ruta**; riesgo de incluir cadenas no usadas si no se mantiene la disciplina.
+- **Intlayer**: Realiza **tree-shaking** en la compilación y **carga perezosa por diccionario/locale**. El contenido no usado no se incluye.
 
-   - Obtienes seguridad a nivel de compilador, evitando claves de traducción "con errores tipográficos" o faltantes.
+**Por qué es importante:** Paquetes más pequeños y arranque más rápido, especialmente en sitios con múltiples locales.
 
-3. **Alertas Reales de Traducciones Faltantes**
+---
 
-   - Si olvidas una clave o traducción de idioma, recibirás una advertencia en tiempo de construcción (en lugar de enviar una interfaz de usuario incompleta).
+### 7) Experiencia de desarrollo (DX), herramientas y mantenimiento
 
-4. **Enrutamiento Avanzado Incorporado**
+- **next-intl / next-i18next**: Normalmente conectarás plataformas externas para traducciones y flujos editoriales.
+- **Intlayer**: Incluye un **Editor Visual gratuito** y un **CMS opcional** (compatible con Git o externalizado). Además, una **extensión para VSCode** para la creación de contenido y **traducciones asistidas por IA** usando tus propias claves de proveedor.
 
-   - La detección automática de idiomas, la generación dinámica de rutas y la fácil gestión de URL localizadas están incluidas.
-   - Un `intlayerMiddleware` estándar no requiere reescrituras personalizadas profundas.
+**Por qué es importante:** Reduce los costos operativos y acorta el ciclo entre desarrolladores y autores de contenido.
 
-5. **Configuración de Una Sola Parada**
+---
 
-   - Minimal boilerplate: simplemente define tu `intlayer.config.ts`, envuelve `next.config` con `withIntlayer`, y agrega el middleware oficial.
-   - Uso claro y directo para componentes **del servidor** y **del cliente** a través de `IntlayerServerProvider` y `IntlayerClientProvider`.
+## ¿Cuándo elegir cuál?
 
-6. **Amigable con SEO**
-   - Ayudantes incorporados (`getMultilingualUrls`, atributos `hrefLang`, etc.) facilitan la producción de páginas y mapas del sitio compatibles con SEO.
+- **Elige next-intl** si quieres una solución **mínima**, te sientes cómodo con catálogos centralizados y tu aplicación es de tamaño **pequeño a mediano**.
+- **Elige next-i18next** si necesitas el **ecosistema de plugins de i18next** (por ejemplo, reglas avanzadas ICU mediante plugins) y tu equipo ya conoce i18next, aceptando **más configuración** para mayor flexibilidad.
+- **Elige Intlayer** si valoras el **contenido con alcance por componente**, **TypeScript estricto**, **garantías en tiempo de compilación**, **tree-shaking** y herramientas integradas para enrutamiento/SEO/editor - especialmente para **Next.js App Router** y **bases de código grandes y modulares**.
 
 ---
 
-## Ejemplo: Intlayer en acción
-
-A continuación se presenta un _fragmento muy_ condensado que ilustra cómo aprovechar Intlayer en un proyecto Next.js 15. Para obtener todos los detalles y ejemplos de código, [consulta la guía completa de Intlayer](#).
-
-<details>
-<summary>Ejemplo paso a paso</summary>
-
-1. **Instalar y configurar**
-
-   ```bash
-   npm install intlayer next-intlayer
-   ```
-
-   ```ts
-   // intlayer.config.ts
-   import { Locales, type IntlayerConfig } from "intlayer";
-
-   const config: IntlayerConfig = {
-     internationalization: {
-       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
-       defaultLocale: Locales.ENGLISH,
-     },
-   };
-   export default config;
-   ```
-
-2. **Usar el complemento**
-
-   ```ts
-   // next.config.mjs
-   import { withIntlayer } from "next-intlayer/server";
-
-   /** @type {import('next').NextConfig} */
-   const nextConfig = {};
-
-   export default withIntlayer(nextConfig);
-   ```
-
-3. **Agregar Middleware**
-
-   ```ts
-   // src/middleware.ts
-   export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
-
-   export const config = {
-     matcher:
-       "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
-   };
-   ```
-
-4. **Crear un diseño localizado**
-
-   ```tsx
-   // src/app/[locale]/layout.tsx
-   import { getHTMLTextDir } from "intlayer";
-   import { NextLayoutIntlayer } from "next-intlayer";
-
-   const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
-     const { locale } = params;
-     return (
-       <html lang={locale} dir={getHTMLTextDir(locale)}>
-         <body>{children}</body>
-       </html>
-     );
-   };
-
-   export { generateStaticParams } from "next-intlayer";
-   export default LocaleLayout;
-   ```
-
-5. **Declarar y usar contenido**
-
-   ```tsx
-   // src/app/[locale]/page.content.ts
-   import { t } from "intlayer";
-
-   export default {
-     key: "page",
-     content: {
-       getStarted: {
-         main: t({
-           en: "Get started by editing",
-           fr: "Commencez par éditer",
-           es: "Comience por editar",
-         }),
-         pageLink: "src/app/page.tsx",
-       },
-     },
-   };
-   ```
-
-   ```tsx
-   // src/app/[locale]/page.tsx
-   import { IntlayerServerProvider } from "next-intlayer/server";
-   import { IntlayerClientProvider, useIntlayer } from "next-intlayer";
-
-   const PageContent = () => {
-     const { content } = useIntlayer("page");
-     return (
-       <>
-         <p>{content.getStarted.main}</p>
-         <code>{content.getStarted.pageLink}</code>
-       </>
-     );
-   };
-
-   export default function Page({ params }) {
-     return (
-       <IntlayerServerProvider locale={params.locale}>
-         <IntlayerClientProvider locale={params.locale}>
-           <PageContent />
-         </IntlayerClientProvider>
-       </IntlayerServerProvider>
-     );
-   }
-   ```
-
-   </details>
+## Notas prácticas de migración (next-intl / next-i18next → Intlayer)
+
+- **Comience por función**: Mueva una ruta o componente a la vez a **diccionarios locales**.
+- **Mantenga los catálogos antiguos en paralelo**: Haga una transición gradual durante la migración; evite un cambio radical.
+- **Active las comprobaciones estrictas**: Permita que la detección en tiempo de compilación revele las brechas temprano.
+- **Adopte middleware y ayudantes**: Estandarice la detección de locales y las etiquetas SEO en todo el sitio.
+- **Mida los paquetes**: Espere **reducciones en el tamaño del paquete** a medida que se elimina contenido no utilizado.
 
 ---
 
 ## Conclusión
 
-Cada solución, **next-intl**, **next-i18next** e **Intlayer**, ha demostrado ser efectiva para proyectos multilingües de Next.js. Sin embargo, **Intlayer** va más allá al:
+Las tres bibliotecas tienen éxito en la localización básica. La diferencia está en **cuánto trabajo debe hacer** para lograr una configuración robusta y escalable en **Next.js moderno**:
 
-- **Fomentar fuertemente una arquitectura de traducción a nivel de componente**
-- Integrarse sin problemas con **Next.js 13+ y Componentes del Servidor**
-- Ofrecer **auto-generación poderosa de TypeScript** para código más seguro
-- Manejar **traducciones faltantes** en tiempo de construcción
-- Proporcionar un **enfoque simplificado y de configuración única** con enrutamiento y middleware avanzados
+- Con **Intlayer**, el **contenido modular**, **TS estricto**, **seguridad en tiempo de compilación**, **paquetes optimizados (tree-shaken)** y **herramientas de App Router + SEO de primera clase** son **valores predeterminados**, no tareas.
+- Si tu equipo valora la **mantenibilidad y velocidad** en una aplicación multilingüe impulsada por componentes, Intlayer ofrece la experiencia **más completa** hoy en día.
 
-Si deseas características de i18n **modernas** adaptadas al App Router de Next.js y buscas una experiencia **totalmente tipada** sin tener que montar manualmente lógica de retroceso, reescrituras de rutas o pasos de construcción complejos, **Intlayer** es una opción convincente. No solo acorta tu tiempo de configuración, sino que también asegura un enfoque más mantenible y escalable para las traducciones de tu equipo.
+Consulta el documento ['¿Por qué Intlayer?'](https://intlayer.org/doc/why) para más detalles.