@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.5

package/docs/es/formatters.md

@@ -182,6 +182,61 @@ getLocaleName("de", "es"); // "alemán"
 - **displayLocale**: El locale para el cual obtener el nombre
 - **targetLocale**: El locale en el que se mostrará el nombre (por defecto es displayLocale)
 
+### Composables Disponibles
+
+Todos los composables devuelven refs computadas que utilizan automáticamente la locale del `IntlayerProvider` inyectado.
+
+| Composable          | Description                              | Example Output                  |
+| ------------------- | ---------------------------------------- | ------------------------------- |
+| `useNumber()`       | Formatear números con agrupación         | `"123,456.789"`                 |
+| `useCurrency()`     | Formatear valores de moneda              | `"€1,234.50"`                   |
+| `usePercentage()`   | Formatear porcentajes                    | `"25%"`                         |
+| `useDate()`         | Formatear fechas y horas                 | `"Aug 2, 2025"`                 |
+| `useRelativeTime()` | Formatear tiempo relativo                | `"in 3 days"`                   |
+| `useUnit()`         | Formatear valores con unidades           | `"5 kilometers"`                |
+| `useCompact()`      | Formatear números en notación compacta   | `"1.2K"`                        |
+| `useList()`         | Formatear arrays como listas             | `"apple, banana, and orange"`   |
+| `useIntl()`         | Obtener objeto `Intl` vinculado a locale | Acceso completo a la API `Intl` |
+
+### Ejemplo Completo
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `getLocaleLang(locale?)`
 
 Extrae el código de idioma de una cadena de locale:
@@ -196,6 +251,10 @@ getLocaleLang("de"); // "de"
 
 - **locale**: El locale del cual extraer el idioma (por defecto es el locale actual)
 
+## Formateadores Vanilla JS / Node.js
+
+Para contextos sin framework, importa formateadores directamente desde `intlayer`. Ten en cuenta que debes pasar la locale manualmente.
+
 ### `getLocaleFromPath(inputUrl)`
 
 Extrae el segmento de locale de una URL o ruta:
@@ -212,6 +271,8 @@ getLocaleFromPath("https://example.com/es/about"); // "es"
 - **inputUrl**: La cadena completa de URL o ruta a procesar
 - **returns**: El locale detectado o el locale predeterminado si no se encuentra ningún locale
 
+### Funciones de Formato
+
 ### `getPathWithoutLocale(inputUrl, locales?)`
 
 Elimina el segmento de locale de una URL o ruta:
@@ -336,6 +397,8 @@ const content = await getIntlayerAsync("common", "fr");
 
 Todos los helpers a continuación son exportados desde `intlayer`.
 
+### Características Intl Adicionales
+
 ### `number(value, options?)`
 
 Formatea un valor numérico utilizando agrupación y decimales sensibles al locale.
@@ -372,6 +435,23 @@ percentage(25); // "25%"
 percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 ```
 
+#### `Intl.PluralRules`
+
+Para determinar formas plurales en diferentes locales:
+
+```ts
+import { Intl } from "intlayer";
+
+const pluralRules = new Intl.PluralRules("ar");
+pluralRules.select(0); // "zero"
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "two"
+pluralRules.select(3); // "few"
+pluralRules.select(11); // "many"
+```
+
+## Utilidades de Locale
+
 ### `currency(value, options?)`
 
 Formatea un valor como moneda localizada. Por defecto es `USD` con dos dígitos decimales.
@@ -482,6 +562,8 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+## Utilidades de Manejo de Contenido
+
 ## Notas
 
 - Todos los ayudantes aceptan entradas de tipo `string`; internamente se convierten a números o fechas.

package/docs/es/how_works_intlayer.md

@@ -22,6 +22,10 @@ author: aymericzip
 
 # Cómo funciona Intlayer
 
+## Tabla de contenidos
+
+<TOC/>
+
 ## Resumen
 
 La idea principal detrás de Intlayer es adoptar una gestión de contenido por componente. Entonces, la idea detrás de Intlayer es permitirte declarar tu contenido en cualquier lugar de tu base de código, como en el mismo directorio que tu componente.
@@ -139,8 +143,6 @@ El paquete `vue-intlayer` se utiliza para interpretar los diccionarios de Intlay
 
 ### nuxt-intlayer
 
-### nuxt-intlayer
-
 El paquete `nuxt-intlayer` es un módulo de Nuxt para hacer que los diccionarios de Intlayer sean utilizables en aplicaciones Nuxt. Integra características esenciales para que Intlayer funcione en un entorno Nuxt, como middleware de traducción, enrutamiento o la configuración del archivo `nuxt.config.js`.
 
 ### svelte-intlayer
@@ -157,8 +159,6 @@ El paquete `preact-intlayer` se utiliza para interpretar los diccionarios de Int
 
 ### angular-intlayer (WIP)
 
-### angular-intlayer (WIP)
-
 El paquete `angular-intlayer` se utiliza para interpretar los diccionarios de Intlayer y hacerlos utilizables en aplicaciones Angular.
 
 ### express-intlayer

package/docs/es/intlayer_CMS.md

@@ -40,6 +40,12 @@ Para ello, Intlayer introduce el concepto de 'diccionarios distantes'.
 
 ![Interfaz del CMS de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png)
 
+## Tabla de Contenidos
+
+<TOC/>
+
+---
+
 ## Entendiendo los diccionarios distantes
 
 Intlayer diferencia entre diccionarios 'locales' y 'distantes'.
@@ -378,3 +384,18 @@ Notas y restricciones:
 - Asegúrate de que la configuración del proyecto se haya enviado al CMS de Intlayer.
 
 - El editor visual utiliza un iframe para mostrar tu sitio web. Asegúrate de que la Política de Seguridad de Contenidos (CSP) de tu sitio web permita la URL del CMS como `frame-ancestors` ('https://app.intlayer.org' por defecto). Revisa la consola del editor para cualquier error.
+
+## Depuración
+
+Si encuentras problemas con el CMS, verifica lo siguiente:
+
+- La aplicación está en ejecución.
+
+- La configuración de [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) está correctamente establecida en tu archivo de configuración de Intlayer.
+  - Campos requeridos:
+    - La URL de la aplicación debe coincidir con la que estableciste en la configuración del editor (`applicationURL`).
+    - La URL del CMS
+
+- Asegúrate de que la configuración del proyecto se haya enviado al CMS de Intlayer.
+
+- El editor visual utiliza un iframe para mostrar tu sitio web. Asegúrate de que la Política de Seguridad de Contenidos (CSP) de tu sitio web permita la URL del CMS como `frame-ancestors` ('https://app.intlayer.org' por defecto). Verifica la consola del editor para cualquier error.

package/docs/es/intlayer_visual_editor.md

@@ -192,29 +192,6 @@ pnpm intlayer-editor start -e development
 
 Si encuentras algún problema con el editor visual, verifica lo siguiente:
 
-- El editor visual y la aplicación están en ejecución.
-
-- La configuración del [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) está correctamente establecida en tu archivo de configuración de Intlayer.
-  - Campos requeridos: - La URL de la aplicación debe coincidir con la que configuraste en la configuración del editor (`applicationURL`).
-    bash packageManager="npm"
-    npx intlayer-editor start -e development
-
-```bash packageManager="npm"
-npx intlayer-editor start -e development
-```
-
-```bash packageManager="yarn"
-yarn intlayer-editor start -e development
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer-editor start -e development
-```
-
-## Depuración
-
-Si encuentras algún problema con el editor visual, verifica lo siguiente:
-
 - Que el editor visual y la aplicación estén en ejecución.
 
 - Que la configuración del [`editor`](https://intlayer.org/doc/concept/configuration#editor-configuration) esté correctamente establecida en tu archivo de configuración de Intlayer.

package/docs/es/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -316,7 +316,134 @@ La integración de Astro añade un middleware de Vite que ayuda con el enrutamie
 
 </Step>
 
-<Step number={7} title="Continúa usando tus frameworks favoritos">
+<Step number={7} title="Agregar un selector de idioma">
+
+Para permitir a los usuarios cambiar de idioma, puedes crear un componente `LocaleSwitcher`. Este componente debe mostrar una lista de todos los idiomas admitidos y enlazar a la misma página en cada idioma.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Nota sobre la persistencia:**
+> El uso de `setLocaleInStorageClient` en el script del lado del cliente garantiza que la preferencia de idioma del usuario se guarde en una cookie. Esto permite que el middleware de Intlayer recuerde la elección y redirija automáticamente al usuario a su idioma preferido en futuras visitas.
+
+</Step>
+
+<Step number={8} title="Sitemap y Robots.txt">
+
+Intlayer ofrece utilidades para crear dinámicamente tu sitemap localizado y tus archivos robots.txt.
+
+#### Sitemap
+
+Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
+
+> El sitemap generado por Intlayer admite el espacio de nombres `xhtml:link` (Hreflang XML Extensions). A diferencia de los generadores de sitemap predeterminados que solo enumeran URL sin procesar, Intlayer crea automáticamente los enlaces bidireccionales necesarios entre todas las versiones de idioma de una página (por ejemplo, `/about`, `/about?lang=fr` y `/about?lang=es`). Esto garantiza que los motores de búsqueda indexen y sirvan correctamente la versión de idioma adecuada a la audiencia adecuada.
+
+Crea `src/pages/sitemap.xml.ts` para generar un sitemap que incluya todas tus rutas localizadas.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { path: "/about", changefreq: "monthly", priority: 0.7 },
+];
+
+const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
+
+export const GET: APIRoute = async ({ site }) => {
+  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Crea `src/pages/robots.txt.ts` para controlar el rastreo de los motores de búsqueda.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="Continúa usando tus frameworks favoritos">
 
 Sigue construyendo tu aplicación con el framework que prefieras.
 

package/docs/es/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Lit multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Preact i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Preact multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + React multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Solid i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Solid multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Svelte i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Svelte multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vanilla JS i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Vanilla JS multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vue i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Vue multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_express.md

@@ -32,10 +32,6 @@ author: aymericzip
 
 `express-intlayer` es un middleware potente de internacionalización (i18n) para aplicaciones Express, diseñado para hacer que tus servicios backend sean accesibles globalmente al proporcionar respuestas localizadas basadas en las preferencias del cliente.
 
-## ¿Por qué internacionalizar tu backend?
-
-Internacionalizar tu backend es esencial para atender eficazmente a una audiencia global. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes contextos lingüísticos.
-
 ### Casos prácticos
 
 - **Mostrar errores del backend en el idioma del usuario**: Cuando ocurre un error, mostrar mensajes en el idioma nativo del usuario mejora la comprensión y reduce la frustración. Esto es especialmente útil para mensajes de error dinámicos que podrían mostrarse en componentes del frontend como toasts o modales.

package/docs/es/intlayer_with_nestjs.md

@@ -33,24 +33,6 @@ history:
 
 `express-intlayer` es un middleware poderoso de internacionalización (i18n) para aplicaciones Express, diseñado para hacer que tus servicios backend sean accesibles globalmente proporcionando respuestas localizadas basadas en las preferencias del cliente. Dado que NestJS está construido sobre Express, puedes integrar sin problemas `express-intlayer` en tus aplicaciones NestJS para manejar contenido multilingüe de manera efectiva.
 
-## ¿Por qué internacionalizar tu backend?
-
-Internacionalizar tu backend es esencial para atender a una audiencia global de manera efectiva. Permite que tu aplicación entregue contenido y mensajes en el idioma preferido de cada usuario. Esta capacidad mejora la experiencia del usuario y amplía el alcance de tu aplicación al hacerla más accesible y relevante para personas de diferentes orígenes lingüísticos.
-
-### Casos de Uso Prácticos
-
-- **Mostrar Errores del Backend en el Idioma del Usuario**: Cuando ocurre un error, mostrar mensajes en el idioma nativo del usuario mejora la comprensión y reduce la frustración. Esto es especialmente útil para mensajes de error dinámicos que podrían mostrarse en componentes del front-end como notificaciones (toasts) o modales.
-
-- **Recuperar Contenido Multilingüe**: Para aplicaciones que extraen contenido de una base de datos, la internacionalización garantiza que puedas servir este contenido en múltiples idiomas. Esto es crucial para plataformas como sitios de comercio electrónico o sistemas de gestión de contenido que necesitan mostrar descripciones de productos, artículos y otros contenidos en el idioma preferido por el usuario.
-
-- **Enviar Correos Electrónicos Multilingües**: Ya sean correos transaccionales, campañas de marketing o notificaciones, enviar correos en el idioma del destinatario puede aumentar significativamente el compromiso y la efectividad.
-
-- **Notificaciones Push Multilingües**: Para aplicaciones móviles, enviar notificaciones push en el idioma preferido del usuario puede mejorar la interacción y la retención. Este toque personal puede hacer que las notificaciones se sientan más relevantes y accionables.
-
-- **Otras Comunicaciones**: Cualquier forma de comunicación desde el backend, como mensajes SMS, alertas del sistema o actualizaciones de la interfaz de usuario, se beneficia de estar en el idioma del usuario, asegurando claridad y mejorando la experiencia general del usuario.
-
-Al internacionalizar el backend, su aplicación no solo respeta las diferencias culturales, sino que también se alinea mejor con las necesidades del mercado global, convirtiéndose en un paso clave para escalar sus servicios a nivel mundial.
-
 ## Comenzando
 
 ### Crear un nuevo proyecto NestJS

package/docs/es/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js 14 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -59,6 +59,10 @@ author: aymericzip
 
 Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-next-14-template) en GitHub.
 
+## Tabla de Contenidos
+
+<TOC/>
+
 ## ¿Por qué Intlayer en lugar de alternativas?
 
 En comparación con soluciones principales como `next-intl` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
@@ -947,7 +951,7 @@ Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de Type
 
 ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-Asegúrate de que tu configuración de TypeScript incluya los tipos generados automáticamente.
+Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.
 
 ```json5 fileName="tsconfig.json"
 {
@@ -963,7 +967,7 @@ Asegúrate de que tu configuración de TypeScript incluya los tipos generados au
 
 Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar comprometerlos en tu repositorio Git.
 
-Para hacer esto, puedes agregar las siguientes instrucciones a tu archivo `.gitignore`:
+Para hacerlo, puedes agregar las siguientes instrucciones a tu archivo `.gitignore`:
 
 ```plaintext fileName=".gitignore"
 # Ignorar los archivos generados por Intlayer
@@ -985,6 +989,8 @@ Esta extensión proporciona:
 
 Para más detalles sobre cómo usar la extensión, consulta la [documentación de la extensión Intlayer para VS Code](https://intlayer.org/doc/vs-code-extension).
 
-### Ir Más Allá
+---
+
+### Ir más allá
 
 Para ir más allá, puedes implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar tu contenido usando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).

package/docs/es/intlayer_with_nextjs_15.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 15 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js 15 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -65,6 +65,10 @@ author: aymericzip
 
 Consulta la [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-next-15-template) en GitHub.
 
+## Tabla de Contenidos
+
+<TOC/>
+
 ## ¿Por qué Intlayer en lugar de alternativas?
 
 En comparación con soluciones principales como `next-intl` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
@@ -861,6 +865,22 @@ bun add @intlayer/swc --dev
 
 </Steps>
 
+### Monitorear cambios de diccionarios en Turbopack
+
+Al usar Turbopack como su servidor de desarrollo con el comando `next dev --turbopack`, los cambios en los diccionarios no se detectarán automáticamente por defecto.
+
+Esta limitación ocurre porque Turbopack no puede ejecutar complementos de webpack en paralelo para monitorear los cambios en sus archivos de contenido. Para solucionar esto, deberá usar el comando `intlayer watch` para ejecutar tanto el servidor de desarrollo como el vigilante de compilación de Intlayer simultáneamente.
+
+```json5 fileName="package.json"
+{
+  // ... Sus configuraciones existentes de package.json
+  "scripts": {
+    // ... Sus configuraciones de scripts existentes
+    "dev": "intlayer watch --with 'next dev --turbopack'",
+  },
+}
+```
+
 ### Configurar TypeScript
 
 Intlayer utiliza la ampliación de módulos para aprovechar las ventajas de TypeScript y fortalecer tu base de código.

package/docs/es/intlayer_with_nextjs_16.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js 16 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_nextjs_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_nextjs_no_locale_path.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-10
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 16 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js 16 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:

package/docs/es/intlayer_with_nextjs_page_router.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js Page Router i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Next.js Page Router multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -58,6 +58,10 @@ author: aymericzip
   </Tab>
 </Tabs>
 
+## Tabla de Contenidos
+
+<TOC/>
+
 ## ¿Por qué Intlayer en lugar de alternativas?
 
 En comparación con soluciones principales como `next-intl` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:

package/docs/es/intlayer_with_react_native+expo.md

@@ -308,6 +308,14 @@ Crea archivos de **declaración de contenido** en cualquier lugar de tu proyecto
 - `.content.cjx`
 - etc.
 
+> **Expo Router (web): mantén los archivos `.content.*` fuera del directorio `app/`.** Expo Router trata cada archivo JavaScript/TypeScript dentro de `app/` como una ruta. En la web, su descubrimiento de rutas escanea el sistema de archivos directamente y **no** respeta el `resolver.blockList` de Metro, por lo que un `*.content.ts` co-ubicado se registra como una ruta. Un archivo como `app/(tabs)/_layout.content.ts` incluso se analiza como un diseño (la parte `.content` se lee como un sufijo de plataforma), lo que choca con el `_layout.tsx` real y lanza:
+>
+> ```
+> The layouts "./(tabs)/_layout.content.ts" and "./(tabs)/_layout.tsx" conflict on the route "/(tabs)/_layout.content". Remove or rename one of these files.
+> ```
+>
+> Coloca tus declaraciones en un directorio fuera de `app/` (por ejemplo, `content/` o `src/content/`). Intlayer descubre los archivos `.content.*` en cualquier lugar del proyecto y los diccionarios se referencian por su `key`, por lo que no se necesitan cambios en las importaciones. En nativo esto no es necesario (el `blockList` de Metro ya los oculta), pero usar un directorio distinto de `app/` mantiene ambas plataformas funcionando.
+
 Ejemplo (TypeScript con nodos TSX para React Native):
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
@@ -528,3 +536,31 @@ Para más detalles sobre cómo usar la extensión, consulta la [documentación d
 ¡Disfruta construyendo tus aplicaciones **React Native** con i18n completamente potenciado a través de **Intlayer**!
 
 ---
+
+### Debug
+
+React Native puede ser menos estable que React Web, por lo que debes prestar especial atención a la alineación de versiones.
+
+Intlayer se orienta principalmente a la Web Intl API; en React Native debes incluir los polyfills apropiados.
+
+Lista de verificación:
+
+- Usa las últimas versiones de `intlayer`, `react-intlayer`, y `react-native-intlayer`.
+- Habilita el polyfill de Intlayer.
+- Si usas `getLocaleName` u otras utilidades basadas en Intl-API, importa estos polyfills temprano (por ejemplo en `index.js` o `App.tsx`):
+
+```ts
+import "intl";
+import "@formatjs/intl-getcanonicallocales/polyfill";
+import "@formatjs/intl-locale/polyfill";
+import "@formatjs/intl-pluralrules/polyfill";
+import "@formatjs/intl-displaynames/polyfill";
+import "@formatjs/intl-listformat/polyfill";
+import "@formatjs/intl-numberformat/polyfill";
+import "@formatjs/intl-relativetimeformat/polyfill";
+import "@formatjs/intl-datetimeformat/polyfill";
+```
+
+- Verifica tu configuración de Metro (resolver aliases, asset plugins, rutas de `tsconfig`) si los módulos no se resuelven.
+
+---