@intlayer/docs 5.5.9 → 5.5.11

package/blog/es/list_i18n_technologies/frameworks/svelte.md

@@ -0,0 +1,129 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: Mejores herramientas de internacionalización (i18n) para Svelte
+description: Descubre las mejores soluciones de internacionalización (i18n) para enfrentar desafíos de traducción, mejorar la búsqueda en la web y ofrecer una experiencia web global sin problemas.
+keywords:
+  - Svelte
+  - i18n
+  - multilingüe
+  - SEO
+  - Internacionalización
+  - Blog
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - frameworks
+  - svelte
+---
+
+# Explorando Soluciones i18n para Traducir tu Sitio Web en Svelte
+
+A medida que la web sigue conectando a las personas de todo el mundo, proporcionar contenido en múltiples idiomas es cada vez más importante. Para los desarrolladores que trabajan con **Svelte**, implementar i18n es esencial para gestionar traducciones de manera eficiente, mantener un código limpio y cumplir con buenas prácticas de SEO. En este artículo, nos adentramos en varias soluciones y flujos de trabajo de i18n para Svelte, ayudándote a elegir la que mejor se adapte a las necesidades de tu proyecto.
+
+---
+
+![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/blog/assets/i18n.webp)
+
+## ¿Qué es la Internacionalización (i18n)?
+
+La internacionalización, comúnmente abreviada como i18n, es el proceso de diseñar y construir tu aplicación para que pueda adaptarse fácilmente a varios idiomas, regiones y convenciones culturales. En Svelte, esto generalmente significa configurar cadenas de traducción, localizar fechas, horas y números, y asegurar que la interfaz de usuario pueda cambiar dinámicamente entre diferentes locales sin grandes reescrituras de código.
+
+Para aprender más sobre los fundamentos de i18n, lee nuestro artículo: [¿Qué es la Internacionalización (i18n)? Definición y Desafíos](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/what_is_internationalization.md).
+
+---
+
+## El Desafío de la Traducción para Aplicaciones Svelte
+
+Traducir una aplicación Svelte puede presentar varios obstáculos:
+
+- **Componentes de un Solo Archivo**: El enfoque de componente de un solo archivo de Svelte (donde HTML, CSS y JavaScript existen juntos) facilita que el texto se disperse, lo que requiere una estrategia para centralizar las traducciones.
+- **Contenido Dinámico**: Los datos recuperados de API o entradas de usuario añaden complejidad al asegurarse de que el contenido se traduzca al instante.
+- **Consideraciones de SEO**: Si usas **SvelteKit** para renderizado del lado del servidor (SSR), configurar URLs localizadas, etiquetas meta y sitemaps para un SEO efectivo requiere un cuidado extra.
+- **Estado y Enrutamiento**: Mantener el idioma correcto en múltiples rutas y páginas dinámicas a menudo implica orquestar estado global, guardias de ruta o hooks personalizados en SvelteKit.
+- **Mantenibilidad**: A medida que crece tu base de código y los archivos de traducción, mantener todo bien organizado y sincronizado se convierte en un esfuerzo continuo.
+
+---
+
+## Principales Soluciones i18n para Svelte
+
+Svelte no proporciona una solución de i18n nativa e incorporada (como Angular), pero la comunidad ha creado una variedad de bibliotecas y patrones robustos. A continuación se presentan varios enfoques populares.
+
+### 1. svelte-i18n
+
+Repositorio: [https://github.com/kaisermann/svelte-i18n](https://github.com/kaisermann/svelte-i18n)
+
+**Descripción General**  
+**svelte-i18n** es una de las bibliotecas más adoptadas para añadir internacionalización a las aplicaciones Svelte. Te permite cargar y cambiar dinámicamente entre locales en tiempo de ejecución e incluye herramientas para plurales, interpolación y más.
+
+**Características Clave**
+
+- **Traducciones en Tiempo de Ejecución**: Carga archivos de traducción bajo demanda, permitiéndote cambiar de idioma sin reconstruir tu aplicación.
+- **Pluralización e Interpolación**: Ofrece una sintaxis sencilla para manejar formas plurales e insertar variables dentro de las traducciones.
+- **Carga Diferida**: Solo obtiene los archivos de traducción que necesitas, optimizando el rendimiento para aplicaciones más grandes o varios idiomas.
+- **Soporte para SvelteKit**: Ejemplos bien documentados muestran cómo integrarse con SSR en SvelteKit para un mejor SEO.
+
+**Consideraciones**
+
+- **Organización del Proyecto**: Necesitarás estructurar tus archivos de traducción lógicamente a medida que crezca el proyecto.
+- **Configuración de SSR**: La configuración de SSR para SEO puede requerir pasos adicionales para asegurar la correcta detección de locales en el lado del servidor.
+- **Rendimiento**: Aunque es flexible en tiempo de ejecución, un gran número de traducciones cargadas a la vez puede afectar los tiempos de carga inicial; considera estrategias de carga diferida o caché.
+
+---
+
+### 2. svelte-intl-precompile
+
+Repositorio: [https://github.com/cibernox/svelte-intl-precompile](https://github.com/cibernox/svelte-intl-precompile)
+
+**Descripción General**  
+**svelte-intl-precompile** utiliza un enfoque de precompilación para reducir la sobrecarga en tiempo de ejecución y mejorar el rendimiento. Esta biblioteca integra el concepto de formateo de mensajes (similar a FormatJS) mientras genera mensajes precompilados en el tiempo de construcción.
+
+**Características Clave**
+
+- **Mensajes Precompilados**: Al compilar cadenas de traducción durante el paso de construcción, se mejora el rendimiento en tiempo de ejecución y el tamaño del paquete puede ser más pequeño.
+- **Integración con SvelteKit**: Compatible con SSR, permitiendo servir páginas totalmente localizadas para un mejor SEO y experiencia del usuario.
+- **Extracción de Mensajes**: Extrae automáticamente cadenas de tu código, reduciendo la carga de actualizaciones manuales.
+- **Formateo Avanzado**: Soporta plurales, traducciones específicas de género e interpolación de variables.
+
+**Consideraciones**
+
+- **Complejidad de Construcción**: Configurar la precompilación puede introducir complejidad adicional en tu canal de construcción.
+- **Contenido Dinámico**: Si necesitas traducciones al vuelo para contenido generado por el usuario, este enfoque puede requerir pasos adicionales para actualizaciones en tiempo de ejecución.
+- **Curva de Aprendizaje**: La combinación de extracción de mensajes y precompilación puede ser ligeramente más compleja para los recién llegados.
+
+---
+
+### 3. i18next con Svelte / SvelteKit
+
+Sitio web: [https://www.i18next.com/](https://www.i18next.com/)
+
+**Descripción General**  
+Aunque **i18next** se asocia más comúnmente con React o Vue, también es posible integrarlo con Svelte o **SvelteKit**. Aprovechar el amplio ecosistema de i18next puede ser útil si necesitas una i18n consistente en diferentes frameworks de JavaScript en tu organización.
+
+**Características Clave**
+
+- **Ecosistema Maduro**: Benefíciate de una amplia gama de plugins, módulos de detección de idiomas y soporte comunitario.
+- **Tiempo de Ejecución o Tiempo de Construcción**: Elige entre cargar dinámicamente o agrupar tus traducciones para un inicio ligeramente más rápido.
+- **Amigable con SSR**: SSR de SvelteKit puede servir contenido localizado utilizando i18next en el lado del servidor, lo que es excelente para SEO.
+- **Características Ricas**: Soporta interpolación, plurales, traducciones anidadas y más escenarios i18n complejos.
+
+**Consideraciones**
+
+- **Configuración Manual**: i18next no tiene una integración dedicada de Svelte lista para usar, por lo que necesitarás configurarlo tú mismo.
+- **Sobrecarga**: i18next es robusto, pero para proyectos Svelte más pequeños, algunas de sus características pueden ser excesivas.
+- **Enrutamiento y Estado**: Manejar el enrutamiento de idiomas probablemente involucrará hooks o middleware personalizados de SvelteKit.
+
+---
+
+### Pensamientos Finales
+
+Al seleccionar una estrategia de i18n para tu aplicación Svelte:
+
+1. **Evalúa la Escala del Proyecto**: Para proyectos más pequeños o prototipos rápidos, bibliotecas más simples como **svelte-i18n** o un enfoque minimalista de i18n pueden ser suficientes. Aplicaciones más grandes y complejas pueden beneficiarse de una solución tipificada, precompilada o basada en un ecosistema más robusto.
+2. **Consideraciones de SSO y SSR**: Si el SEO es crítico o necesitas renderizado del lado del servidor con **SvelteKit**, elige una biblioteca que soporte eficazmente SSR y pueda manejar rutas localizadas, metadatos y sitemaps.
+3. **Tiempo de Ejecución vs. Tiempo de Construcción**: Decide si necesitas un cambio de idioma dinámico en tiempo de ejecución o prefieres traducciones precompiladas para un mejor rendimiento. Cada enfoque implica diferentes compensaciones.
+4. **Integración con TypeScript**: Si depende en gran medida de TypeScript, soluciones como **Intlayer** o bibliotecas con claves tipadas pueden reducir significativamente los errores en tiempo de ejecución y mejorar la experiencia del desarrollador.
+5. **Mantenibilidad y Escalabilidad**: Planifica cómo organizarás, actualizarás y versionarás tus archivos de traducción. La extracción automatizada, las convenciones de nomenclatura y una estructura de carpetas consistente ahorrarán tiempo a largo plazo.
+
+En última instancia, cada biblioteca ofrece fortalezas únicas. Tu elección depende de **rendimiento**, **experiencia del desarrollador**, **necesidades de SEO** y **mantenibilidad a largo plazo**. Al seleccionar una solución que se alinee con los objetivos de tu proyecto, puedes crear una verdadera aplicación global en Svelte, una que deleite a los usuarios de todo el mundo.

package/blog/es/list_i18n_technologies/frameworks/vue.md

@@ -0,0 +1,130 @@
+---
+createdAt: 2025-01-16
+updatedAt: 2025-06-29
+title: Mejores herramientas de internacionalización (i18n) para Vue
+description: Descubre las mejores soluciones de internacionalización (i18n) para enfrentar desafíos de traducción, mejorar la búsqueda en la web y ofrecer una experiencia web global sin problemas.
+keywords:
+  - Vue
+  - i18n
+  - multilingüe
+  - SEO
+  - Internacionalización
+  - Blog
+  - JavaScript
+slugs:
+  - blog
+  - i18n-technologies
+  - frameworks
+  - vue
+---
+
+# Explorando Soluciones de i18n para Traducir Tu Sitio Web de Vue.js
+
+En un paisaje digital cada vez más globalizado, extender el alcance de tu sitio web de Vue.js a usuarios en múltiples idiomas ya no es un “valor agregado”, es una necesidad competitiva. La internacionalización (i18n) permite a los desarrolladores gestionar traducciones y adaptar sus aplicaciones para diversos locales, mientras preservan el valor SEO, la experiencia del usuario y estructuras de código mantenibles. En este artículo, exploraremos diferentes enfoques, que van desde bibliotecas dedicadas hasta soluciones personalizadas, que te ayudarán a integrar i18n en tu proyecto de Vue.js sin problemas.
+
+---
+
+![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/blog/assets/i18n.webp)
+
+## ¿Qué es la Internacionalización (i18n)?
+
+La internacionalización (i18n) es la práctica de preparar una aplicación de software (o sitio web) para múltiples idiomas y convenciones culturales. Dentro del ecosistema de Vue.js, esto incluye establecer cómo el texto, fechas, números, moneda y otros elementos localizables pueden ser adaptados a varios locales. Al configurar i18n desde el principio, aseguras una estructura organizada y escalable para agregar nuevos idiomas y manejar futuras necesidades de localización.
+
+Para aprender más sobre los conceptos básicos de i18n, consulta nuestra referencia: [¿Qué es la Internacionalización (i18n)? Definición y Desafíos](https://github.com/aymericzip/intlayer/blob/main/docs/blog/es/what_is_internationalization.md).
+
+---
+
+## El Desafío de la Traducción para Aplicaciones Vue
+
+Traducir una aplicación de Vue.js presenta su propio conjunto de desafíos:
+
+- **Arquitectura Basada en Componentes:** Similar a React, los componentes de archivo único (SFCs) de Vue pueden contener cada uno texto y configuraciones específicas del locale. Necesitarás una estrategia para centralizar las cadenas de traducción.
+- **Contenido Dinámico:** Los datos obtenidos de APIs o manipulados en tiempo real requieren un enfoque flexible para cargar y aplicar traducciones al vuelo.
+- **Consideraciones de SEO:** Con el renderizado del lado del servidor a través de Nuxt u otros setups SSR, es crítico gestionar URLs localizadas, etiquetas meta y sitemaps para mantener un fuerte SEO.
+- **Estado y Contexto Reactivo:** Asegurarse de que el locale actual se mantenga a través de rutas y componentes, actualizando reactivamente textos y formatos, requiere un enfoque cuidadoso, especialmente cuando se trata de Vuex o Pinia para la gestión del estado.
+- **Sobrecarga de Desarrollo:** Mantener archivos de traducción organizados, consistentes y actualizados puede rápidamente convertirse en una tarea importante si no se gestiona cuidadosamente.
+
+---
+
+## Principales Soluciones de i18n para Vue.js
+
+A continuación se presentan varias bibliotecas y enfoques populares que puedes utilizar para incorporar internacionalización en tus aplicaciones Vue. Cada una busca simplificar la traducción, SEO y consideraciones de rendimiento de diferentes maneras.
+
+---
+
+### 1. Vue I18n
+
+> Sitio web: [https://vue-i18n.intlify.dev/](https://vue-i18n.intlify.dev/)
+
+**Descripción General**  
+**Vue I18n** es la biblioteca de localización más utilizada en el ecosistema de Vue, proporcionando una manera sencilla y rica en características para manejar traducciones en proyectos de Vue 2, Vue 3 y basados en Nuxt.
+
+**Características Clave**
+
+- **Configuración Simple**  
+  Configura rápidamente mensajes localizados y cambia locales utilizando una API bien documentada.
+- **Reactividad**  
+  Los cambios de locale actualizan instantáneamente el texto a través de los componentes gracias al sistema reactivo de Vue.
+- **Pluralización y Formateo de Fechas/Números**  
+  Métodos integrados gestionan casos de uso comunes, incluyendo formas plurales, formateo de fechas/hora, formateo de números/moneda y más.
+- **Soporte para Nuxt.js**  
+  El módulo Nuxt I18n extiende Vue I18n para la generación automática de rutas, URLs amigables para SEO y sitemaps para cada locale.
+- **Soporte para TypeScript**  
+  Puede integrarse con aplicaciones de Vue basadas en TypeScript, aunque la autocompletación para claves de traducción puede requerir configuración adicional.
+- **SSR y División de Código**  
+  Funciona sin problemas con Nuxt para el renderizado del lado del servidor y soporta la división de código para archivos de traducción para aumentar el rendimiento.
+
+**Consideraciones**
+
+- **Sobrecarga de Configuración**  
+  Proyectos grandes o de múltiples equipos pueden requerir una estructura de carpetas clara y convenciones de nombrado para gestionar archivos de traducción de manera eficiente.
+- **Ecosistema de Plugins**  
+  Si bien es robusto, puede que necesites seleccionar cuidadosamente entre múltiples plugins o módulos (Nuxt I18n, Vue I18n, etc.) para construir una configuración perfecta.
+
+---
+
+### 2. LinguiJS (Integración con Vue)
+
+> Sitio web: [https://lingui.js.org/](https://lingui.js.org/)
+
+**Descripción General**  
+Conocida originalmente por su integración con React, **LinguiJS** también ofrece un plugin para Vue que se centra en un mínimo de sobrecarga en tiempo de ejecución y un flujo de trabajo automatizado de extracción de mensajes.
+
+**Características Clave**
+
+- **Extracción Automática de Mensajes**  
+  Utiliza la CLI de Lingui para escanear tu código Vue en busca de traducciones, reduciendo la entrada manual de IDs de mensajes.
+- **Compacto y Eficiente**  
+  Traducciones compiladas conducen a una menor huella en tiempo de ejecución, esencial para aplicaciones de Vue de alto rendimiento.
+- **TypeScript y Autocompletado**  
+  Aunque sea un poco más manual de configurar, IDs y catálogos tipados pueden mejorar la experiencia del desarrollador en proyectos de Vue basados en TypeScript.
+- **Compatibilidad con Nuxt y SSR**  
+  Puede integrarse con setups de SSR para servir páginas completamente localizadas, mejorando el SEO y el rendimiento para cada locale soportado.
+- **Pluralización y Formateo**  
+  Soporte integrado para plurales, formateo de números, fechas y más, alineándose con los estándares de formatos de mensajes de ICU.
+
+**Consideraciones**
+
+- **Documentación Menos Específica de Vue**  
+  Si bien LinguiJS tiene soporte oficial para Vue, su documentación se centra principalmente en React; puede que necesites apoyarte en ejemplos de la comunidad.
+- **Comunidad Más Pequeña**  
+  Comparado con Vue I18n, hay un ecosistema relativamente más pequeño. Plugins mantenidos oficialmente y complementos de terceros pueden ser más limitados.
+
+---
+
+## Reflexiones Finales
+
+Al decidir sobre una solución de i18n para tu aplicación Vue.js:
+
+1. **Evalúa Tus Requisitos**  
+   El tamaño del proyecto, el conjunto de habilidades del desarrollador y la complejidad de la localización son factores a considerar en tu elección.
+2. **Evalúa la Compatibilidad SSR**  
+   Si estás construyendo una aplicación Nuxt o dependiendo de SSR, confirma que tu enfoque elegido soporte renderizado del servidor sin problemas.
+3. **TypeScript y Autocompletado**  
+   Si valoras una fuerte experiencia para el desarrollador con un mínimo de errores tipográficos en las claves de traducción, asegúrate de que tu solución ofrezca definiciones tipadas o se pueda integrar con ellas.
+4. **Gestiendo y Escalabilidad**  
+   A medida que agregas más locales o expandes tu aplicación, una estructura de archivo de traducción organizada es crucial.
+5. **SEO y Metadatos**  
+   Para que los sitios multilingües tengan un buen posicionamiento, tu solución debe simplificar las etiquetas meta localizadas, URLs, sitemaps y `robots.txt` para cada locale.
+
+No importa qué camino elijas, Intlayer, Vue I18n, LinguiJS, o un enfoque personalizado, estarás bien encaminado a ofrecer una aplicación Vue.js amigable para el mundo. Cada solución ofrece diferentes compensaciones en términos de rendimiento, experiencia del desarrollador y escalabilidad. Al evaluar cuidadosamente las necesidades de tu proyecto, puedes elegir con confianza la configuración de i18n que establece a ti y a tu audiencia multilingüe para el éxito.

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

@@ -0,0 +1,285 @@
+---
+createdAt: 2024-08-11
+updatedAt: 2025-06-29
+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
+keywords:
+  - next-intl
+  - next-i18next
+  - Intlayer
+  - Internacionalización
+  - Blogumentación
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - blog
+  - next-i18next-vs-next-intl-vs-intlayer
+---
+
+# next-i18next VS next-intl VS Intlayer | Next.js Internacionalización (i18n)
+
+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**.
+
+Este documento destaca criterios clave:
+
+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**.
+
+---
+
+## Descripción general de cada biblioteca
+
+### 1. next-intl
+
+**Enfoque principal**: Configuración rápida y fácil con un enfoque ligero para la localización.
+
+- **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).
+
+---
+
+### 2. next-i18next
+
+**Enfoque principal**: Solución probada en el tiempo utilizando `i18next` en el fondo, ampliamente adoptada para proyectos de Next.js.
+
+- **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.).
+
+**Uso cuando**: Ya estás comprometido con el ecosistema de `i18next` o tienes traducciones basadas en i18next existentes.
+
+---
+
+### 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**.
+
+#### Ventajas Clave
+
+1. **Arquitectura**
+
+   - 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.
+
+4. **Optimizado para Componentes del Servidor**
+
+   - 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+).
+
+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**).
+
+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.
+
+> **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**.
+
+---
+
+## 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**       |
+
+---
+
+## ¿Por qué Intlayer?
+
+Para equipos que migran a o construyen sobre el **Next.js App Router** (versiones 13, 14 o 15) con **Componentes del Servidor**, Intlayer proporciona:
+
+1. **Una Arquitectura Simplificada**
+
+   - Cada ruta o componente contiene sus propias traducciones. Esto fomenta claridad y mantenibilidad.
+
+2. **Integración Poderosa de TypeScript**
+
+   - Obtienes seguridad a nivel de compilador, evitando claves de traducción "con errores tipográficos" o faltantes.
+
+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).
+
+4. **Enrutamiento Avanzado Incorporado**
+
+   - 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.
+
+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`.
+
+6. **Amigable con SEO**
+   - Ayudantes incorporados (`getMultilingualUrls`, atributos `hrefLang`, etc.) facilitan la producción de páginas y mapas del sitio compatibles con SEO.
+
+---
+
+## 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>
+
+---
+
+## 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:
+
+- **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
+
+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.