@intlayer/docs 5.7.8 → 5.8.0

package/docs/es/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
+updatedAt: 2025-08-20
 title: Interés de Intlayer
 description: Descubre los beneficios y ventajas de usar Intlayer en tus proyectos. Entiende por qué Intlayer destaca entre otros frameworks.
 keywords:
@@ -11,41 +11,104 @@ keywords:
   - Comparación
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer: Una forma personalizada de traducir tu sitio web
+# ¿Por qué deberías considerar Intlayer?
 
-**Intlayer** es una biblioteca de internacionalización diseñada específicamente para desarrolladores de JavaScript. Permite la declaración de tu contenido en cualquier parte de tu código. Convierte la declaración de contenido multilingüe en diccionarios estructurados para integrarlos fácilmente en tu código. Usando TypeScript, **Intlayer** hace que tu desarrollo sea más sólido y eficiente.
+## ¿Qué es Intlayer?
 
-## Ejemplo de uso
+**Intlayer** es una biblioteca de internacionalización diseñada específicamente para desarrolladores de JavaScript. Permite la declaración de tu contenido en cualquier parte de tu código. Convierte las declaraciones de contenido multilingüe en diccionarios estructurados para integrarlos fácilmente en tu código. Usando TypeScript, **Intlayer** hace que tu desarrollo sea más sólido y eficiente.
+
+## ¿Por qué se creó Intlayer?
+
+Intlayer fue creado para resolver un problema común que afecta a todas las bibliotecas i18n comunes como `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl` y `vue-i18n`.
+
+Todas estas soluciones adoptan un enfoque centralizado para listar y gestionar tu contenido. Por ejemplo:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── fr.json
+│   └── es.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+O aquí usando espacios de nombres:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Este tipo de arquitectura ralentiza el proceso de desarrollo y hace que la base de código sea más compleja de mantener por varias razones:
+
+1. **Para cualquier nuevo componente creado, debes:**
+   - Crear el nuevo recurso/espacio de nombres en la carpeta `locales`
+   - Recordar importar el nuevo espacio de nombres en tu página
+   - Traducir tu contenido (a menudo hecho manualmente copiando/pegando desde proveedores de IA)
+
+2. **Para cualquier cambio realizado en tus componentes, debes:**
+   - Buscar el recurso/espacio de nombres relacionado (lejos del componente)
+   - Traducir tu contenido
+   - Asegurarte de que tu contenido esté actualizado para cualquier localización
+   - Verificar que tu espacio de nombres no incluya claves/valores sin usar
+   - Asegurarte de que la estructura de tus archivos JSON sea la misma para todas las localizaciones
+
+En proyectos profesionales que utilizan estas soluciones, a menudo se emplean plataformas de localización para ayudar a gestionar la traducción de tu contenido. Sin embargo, esto puede volverse rápidamente costoso para proyectos grandes.
+
+Para resolver este problema, Intlayer adopta un enfoque que delimita tu contenido por componente y mantiene tu contenido cerca de tu componente, como a menudo hacemos con CSS (`styled-components`), tipos, documentación (`storybook`) o pruebas unitarias (`jest`).
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,18 +125,17 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
-// Contenido de ejemplo del componente con traducciones
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -81,18 +143,17 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
-// Contenido de ejemplo del componente con traducciones
 const componentExampleContent = {
   key: "component-example",
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -100,10 +161,9 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
-// Componente de ejemplo que utiliza la traducción desde Intlayer
 export const ComponentExample = () => {
   const { myTranslatedContent } = useIntlayer("component-example");
 
@@ -111,7 +171,7 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
 const ComponentExample = () => {
@@ -121,7 +181,7 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
 const ComponentExample = () => {
@@ -131,27 +191,76 @@ const ComponentExample = () => {
 };
 ```
 
-## ¿Por qué elegir Intlayer?
-
-| Característica                                    | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Gestión de Contenido Impulsada por JavaScript** | Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente.                                                                                                                                                                                                                                                                                                                                                                             |
-| **Entorno con Tipos Seguros**                     | Aprovecha TypeScript para garantizar que todas tus definiciones de contenido sean precisas y sin errores.                                                                                                                                                                                                                                                                                                                                                                      |
-| **Archivos de Contenido Integrados**              | Mantenga sus traducciones cerca de sus respectivos componentes, mejorando la mantenibilidad y claridad.                                                                                                                                                                                                                                                                                                                                                                        |
-| **Configuración Simplificada**                    | Comience rápidamente con una configuración mínima, especialmente optimizada para proyectos Next.js.                                                                                                                                                                                                                                                                                                                                                                            |
-| **Soporte para Componentes del Servidor**         | Perfectamente adecuado para componentes del servidor de Next.js, asegurando una renderización fluida del lado del servidor.                                                                                                                                                                                                                                                                                                                                                    |
-| **Enrutamiento Mejorado**                         | Soporte completo para el enrutamiento de aplicaciones Next.js, adaptándose sin problemas a estructuras de aplicación complejas.                                                                                                                                                                                                                                                                                                                                                |
-| **Base de código organizada**                     | Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta.                                                                                                                                                                                                                                                                                                                                                                                     |
-| **Auto-traducción en CI**                         | Rellena automáticamente tus traducciones en tu CI usando tu propia clave API de OpenAI, eliminando la necesidad de una plataforma de localización (L10n).                                                                                                                                                                                                                                                                                                                      |
-| **Integración del Servidor MCP**                  | Proporciona un servidor MCP (Protocolo de Contexto de Modelo) para la automatización en el IDE, permitiendo una gestión de contenido y flujos de trabajo de i18n sin interrupciones directamente dentro de tu entorno de desarrollo. [Aprende más](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md).                                                                                                                                               |
-| **Soporte para Markdown**                         | Importa e interpreta archivos markdown para contenido multilingüe como políticas de privacidad.                                                                                                                                                                                                                                                                                                                                                                                |
-| **Editor Visual Gratuito y CMS**                  | Un editor visual gratuito y un CMS están disponibles si necesitas trabajar con redactores de contenido para tus traducciones, eliminando nuevamente la necesidad de una plataforma de localización y permitiendo la externalización del contenido fuera de la base de código.                                                                                                                                                                                                  |
-| **Recuperación Simplificada de Contenido**        | No es necesario llamar a tu función `t` para cada fragmento de contenido; recupera todo tu contenido directamente usando un solo hook.                                                                                                                                                                                                                                                                                                                                         |
-| **Implementación Consistente**                    | La misma implementación para componentes cliente y servidor, sin necesidad de pasar tu función `t` a través de cada componente servidor.                                                                                                                                                                                                                                                                                                                                       |
-| **Contenido Tree-shakable**                       | El contenido es tree-shakable, lo que aligera el paquete final.                                                                                                                                                                                                                                                                                                                                                                                                                |
-| **Renderizado Estático No Bloqueante**            | Intlayer no bloquea el Renderizado Estático como lo hace `next-intl`.                                                                                                                                                                                                                                                                                                                                                                                                          |
-| **Interoperabilidad**                             | Permite la interoperabilidad con [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_next-intl.md), y [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_react-intl.md). |
-
-## Historial de Documentación
-
-- 5.5.10 - 2025-06-29: Historial inicial
+Este enfoque te permite:
+
+1. **Aumentar la velocidad de desarrollo**
+   - Los archivos `.content.{{ts|mjs|cjs|json}}` pueden ser creados usando una extensión de VSCode
+   - Las herramientas de autocompletado con IA en tu IDE (como GitHub Copilot) pueden ayudarte a declarar tu contenido, reduciendo el copiar/pegar
+
+2. **Limpiar tu base de código**
+   - Reducir la complejidad
+   - Incrementar la mantenibilidad
+
+3. **Duplicar tus componentes y su contenido relacionado más fácilmente (Ejemplo: componentes de login/registro, etc.)**
+   - Limitando el riesgo de impactar el contenido de otros componentes
+   - Copiando/pegando tu contenido de una aplicación a otra sin dependencias externas
+
+4. **Evitar contaminar tu base de código con claves/valores no usados para componentes no usados**
+   - Si no usas un componente, Intlayer no importará su contenido relacionado
+   - Si eliminas un componente, te será más fácil recordar eliminar su contenido relacionado ya que estará presente en la misma carpeta
+
+5. **Reducir el costo de razonamiento para que los agentes de IA declaren tu contenido multilingüe**
+   - El agente de IA no tendrá que escanear toda tu base de código para saber dónde implementar tu contenido
+   - Las traducciones pueden realizarse fácilmente mediante herramientas de autocompletado con IA en tu IDE (como GitHub Copilot)
+
+## Características adicionales de Intlayer
+
+| Funcionalidad                                                                                                                    | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ![Característica](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Compatibilidad entre Frameworks**<br><br>Intlayer es compatible con todos los principales frameworks y bibliotecas, incluyendo Next.js, React, Vite, Vue.js, Nuxt, Preact, Express y más.                                                                                                                                                                                                                                                |
+| ![Característica](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **Gestión de Contenido Potenciada por JavaScript**<br><br>Aprovecha la flexibilidad de JavaScript para definir y gestionar tu contenido de manera eficiente. <br><br> - [Declaración de contenido](https://intlayer.org/doc/concept/content)                                                                                                                                                                                               |
+| ![Característica](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Archivo de Declaración de Contenido por Localidad**<br><br>Acelera tu desarrollo declarando tu contenido una vez, antes de la generación automática.<br><br> - [Archivo de Declaración de Contenido por Localidad](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                     |
+| ![Característica](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Entorno con Tipos Seguros**<br><br>Aprovecha TypeScript para asegurar que tus definiciones de contenido y código estén libres de errores, además de beneficiarte de la autocompletación en el IDE.<br><br> - [Configuración de TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                                | **Configuración Simplificada**<br><br>Pon en marcha rápidamente con una configuración mínima. Ajusta fácilmente los ajustes para internacionalización, enrutamiento, IA, compilación y manejo de contenido.<br><br> - [Explora la integración con Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                          | **Recuperación de Contenido Simplificada**<br><br>No es necesario llamar a tu función `t` para cada contenido. Recupera todo tu contenido directamente usando un solo hook.<br><br> - [Integración con React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                           | **Implementación Consistente de Componentes del Servidor**<br><br>Perfectamente adecuado para componentes del servidor de Next.js, utiliza la misma implementación tanto para componentes cliente como servidor, sin necesidad de pasar tu función `t` a través de cada componente del servidor. <br><br> - [Componentes del Servidor](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                                  | **Base de Código Organizada**<br><br>Mantén tu base de código más organizada: 1 componente = 1 diccionario en la misma carpeta. Las traducciones cercanas a sus respectivos componentes mejoran la mantenibilidad y claridad. <br><br> - [Cómo funciona Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                                | **Enrutamiento Mejorado**<br><br>Soporte completo para el enrutamiento de aplicaciones, adaptándose perfectamente a estructuras complejas de aplicaciones, para Next.js, React, Vite, Vue.js, etc.<br><br> - [Explorar la integración con Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                            |
+| ![Funcionalidad](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                             | **Soporte Markdown**<br><br>Importa e interpreta archivos de localización y Markdown remoto para contenido multilingüe como políticas de privacidad, documentación, etc. Interpreta y haz accesibles los metadatos de Markdown en tu código.<br><br> - [Archivos de contenido](https://intlayer.org/doc/concept/content/file)                                                                                                              |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                              | **Editor Visual y CMS Gratuitos**<br><br>Un editor visual y CMS gratuitos están disponibles para los redactores de contenido, eliminando la necesidad de una plataforma de localización. Mantén tu contenido sincronizado usando Git, o externalízalo total o parcialmente con el CMS.<br><br> - [Editor Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                                     | **Contenido Tree-shakable**<br><br>Contenido tree-shakable, que reduce el tamaño del paquete final. Carga contenido por componente, excluyendo cualquier contenido no utilizado de tu paquete. Soporta carga diferida para mejorar la eficiencia de carga de la aplicación. <br><br> - [Optimización de construcción de la aplicación](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                         |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                           | **Renderizado Estático**<br><br>No bloquea el Renderizado Estático. <br><br> - [Integración con Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                             | **Traducción impulsada por IA**<br><br>Transforma tu sitio web a 231 idiomas con un solo clic utilizando las avanzadas herramientas de traducción impulsadas por IA de Intlayer, usando tu propio proveedor de IA/clave API. <br><br> - [Integración CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI de Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Relleno automático](https://intlayer.org/doc/concept/auto-fill) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                        | **Integración del Servidor MCP**<br><br>Proporciona un servidor MCP (Protocolo de Contexto de Modelo) para la automatización del IDE, permitiendo una gestión de contenido fluida y flujos de trabajo de i18n directamente dentro de tu entorno de desarrollo. <br><br> - [Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                           | **Extensión para VSCode**<br><br>Intlayer proporciona una extensión para VSCode que te ayuda a gestionar tu contenido y traducciones, construir tus diccionarios, traducir tu contenido y más. <br><br> - [Extensión para VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                              |
+| ![Funcionalidad](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                     | **Interoperabilidad**<br><br>Permite la interoperabilidad con react-i18next, next-i18next, next-intl y react-intl. <br><br> - [Intlayer y react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer y next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer y next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)                                                          |
+
+## Comparación de Intlayer con otras soluciones
+
+| Característica                                                    | Intlayer                                                                                                                                      | React-i18next / i18next                                                   | React-Intl (FormatJS)                                            | LinguiJS                                                         | next-intl                                                        | next-i18next                                                     | vue-i18n                                                                 |
+| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| **Traducciones Cerca de los Componentes**                         | Sí, contenido colocalizado con cada componente                                                                                                | No                                                                        | No                                                               | No                                                               | No                                                               | No                                                               | Sí - usando `Componentes de Archivo Único` (SFCs)                        |
+| **Integración con TypeScript**                                    | Avanzada, tipos estrictos generados automáticamente                                                                                           | Básica; configuración adicional para seguridad                            | Buena, pero menos estricta                                       | Tipos, necesita configuración                                    | Buena                                                            | Básica                                                           | Buena (tipos disponibles; la seguridad de claves requiere configuración) |
+| **Detección de Traducción Faltante**                              | Error/advertencia en tiempo de compilación                                                                                                    | Principalmente cadenas de reserva en tiempo de ejecución                  | Cadenas de reserva                                               | Requiere configuración adicional                                 | Reserva en tiempo de ejecución                                   | Reserva en tiempo de ejecución                                   | Reserva/advertencias en tiempo de ejecución (configurable)               |
+| **Contenido enriquecido (JSX/Markdown/componentes)**              | Soporte directo, incluso nodos React                                                                                                          | Limitado / solo interpolación                                             | Sintaxis ICU, no JSX real                                        | Limitado                                                         | No diseñado para nodos enriquecidos                              | Limitado                                                         | Limitado (componentes vía `<i18n-t>`, Markdown vía plugins)              |
+| **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                                                               | No                                                               | No                                                               | 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 de localización externas          | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas | No / disponible a través de plataformas de localización externas         |
+| **Enrutamiento Localizado**                                       | Incorporado, con soporte de middleware                                                                                                        | Plugins o configuración manual                                            | No incorporado                                                   | Plugin/configuración manual                                      | Incorporado                                                      | Incorporado                                                      | Manual a través de Vue Router (Nuxt i18n lo maneja)                      |
+| **Generación Dinámica de Rutas**                                  | Sí                                                                                                                                            | Plugin/ecosistema o configuración manual                                  | No proporcionado                                                 | Plugin/manual                                                    | Sí                                                               | Sí                                                               | No proporcionado (Nuxt i18n lo proporciona)                              |
+| **Pluralización**                                                 | Patrones basados en enumeración; ver documentación                                                                                            | Configurable (plugins como i18next-icu)                                   | Avanzado (ICU)                                                   | Avanzado (ICU/messageformat)                                     | Bueno                                                            | Bueno                                                            | Avanzado (reglas de pluralización integradas)                            |
+| **Formato (fechas, números, monedas)**                            | Formateadores optimizados (Intl en el núcleo)                                                                                                 | A través de plugins o uso personalizado de Intl                           | Formateadores avanzados ICU                                      | Ayudantes ICU/CLI                                                | Bueno (ayudantes Intl)                                           | Bueno (ayudantes Intl)                                           | Formateadores integrados de fecha/número (Intl)                          |
+| **Formato de Contenido**                                          | .tsx, .ts, .js, .json, .md, .txt                                                                                                              | .json                                                                     | .json, .js                                                       | .po, .json                                                       | .json, .js, .ts                                                  | .json                                                            | .json, .js                                                               |
+| **Soporte ICU**                                                   | En desarrollo (ICU nativo)                                                                                                                    | A través de plugin (i18next-icu)                                          | Sí                                                               | Sí                                                               | Sí                                                               | A través de plugin (i18next-icu)                                 | A través de formateador/compilador personalizado                         |
+| **Ayudantes SEO (hreflang, sitemap)**                             | Herramientas integradas: ayudantes para sitemap, **robots.txt**, metadatos                                                                    | Plugins comunitarios/manual                                               | No es núcleo                                                     | No es núcleo                                                     | Bueno                                                            | Bueno                                                            | No es núcleo (Nuxt i18n proporciona ayudantes)                           |
+| **Ecosistema / Comunidad**                                        | Más pequeño pero creciendo rápido y reactivo                                                                                                  | El más grande y maduro                                                    | Grande, empresarial                                              | En crecimiento, más pequeño                                      | Mediano, enfocado en Next.js                                     | Mediano, enfocado en Next.js                                     | Grande en el ecosistema Vue                                              |
+| **Renderizado del lado del servidor y Componentes de Servidor**   | Sí, optimizado para SSR / Componentes de Servidor de React                                                                                    | Soportado, se necesita algo de configuración                              | Soportado en Next.js                                             | Soportado                                                        | Soporte completo                                                 | Soporte completo                                                 | SSR a través de Nuxt/Vue SSR (sin RSC)                                   |
+| **Eliminación de código muerto (cargar solo el contenido usado)** | Sí, por componente en tiempo de compilación mediante plugins de Babel/SWC                                                                     | Usualmente carga todo (puede mejorarse con namespaces/división de código) | Usualmente carga todo                                            | No es el valor predeterminado                                    | Parcial                                                          | Parcial                                                          | Parcial (con división de código/configuración manual)                    |
+| **Carga diferida**                                                | Sí, por localización/por componente                                                                                                           | Sí (por ejemplo, backends/namespaces bajo demanda)                        | Sí (división de paquetes por localización)                       | Sí (importaciones dinámicas de catálogos)                        | Sí (por ruta/por localización)                                   | Sí (por ruta/por localización)                                   | Sí (mensajes de localización asíncronos)                                 |
+| **Gestión de Proyectos Grandes**                                  | Fomenta la modularidad, adecuado para sistemas de diseño                                                                                      | Requiere buena disciplina de archivos                                     | Los catálogos centrales pueden volverse grandes                  | Puede volverse complejo                                          | Modular con configuración                                        | Modular con configuración                                        | Modular con configuración de Vue Router/Nuxt i18n                        |
+
+## Historial del Documento
+
+| Versión | Fecha      | Cambios                               |
+| ------- | ---------- | ------------------------------------- |
+| 5.8.0   | 2025-08-19 | Actualización de la tabla comparativa |
+| 5.5.10  | 2025-06-29 | Inicio del historial                  |

package/docs/es/intlayer_with_tanstack.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-11
 updatedAt: 2025-08-11
 title: Comenzando con Intlayer en TanStack Start (React)
-description: Añade i18n a tu aplicación TanStack Start usando Intlayer—diccionarios a nivel de componente, URLs localizadas y metadatos amigables para SEO.
+description: Añade i18n a tu aplicación TanStack Start usando Intlayer-diccionarios a nivel de componente, URLs localizadas y metadatos amigables para SEO.
 keywords:
   - Internacionalización
   - Documentación

package/docs/es/introduction.md

@@ -32,8 +32,8 @@ Intlayer también proporciona un editor visual opcional que te permite editar y
 .
 └── Components
     └── MyComponent
-        ├── index.content.cjs
-        └── index.mjs
+        ├── index.content.ts
+        └── index.tsx
 ```
 
 ```tsx fileName="src/components/MyComponent/index.content.ts" contentDeclarationFormat="typescript"
@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -63,8 +63,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -82,8 +82,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };

package/docs/es/packages/intlayer/index.md

@@ -153,8 +153,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -179,8 +179,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Menos de un coche menos",
@@ -205,8 +205,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Menos de menos un coche",

package/docs/es/packages/next-intlayer/index.md

@@ -110,8 +110,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -136,8 +136,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Menos que menos un coche",
@@ -162,8 +162,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Menos que menos un coche",