@intlayer/docs 5.5.9 → 5.5.11

package/frequent_questions/es/array_as_content_declaration.md

@@ -0,0 +1,72 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: ¿Puedo usar un arreglo como declaración de contenido?
+description: Aprende cómo usar un arreglo como declaración de contenido.
+keywords:
+  - arreglo
+  - contenido
+  - declaración
+  - intlayer
+slugs:
+  - doc
+  - faq
+  - arreglo-como-declaracion-de-contenido
+---
+
+# ¿Puedo usar un arreglo como declaración de contenido?
+
+Sí, puedes usar un arreglo como declaración de contenido.
+
+```ts
+import { t, type Dictionary } from "intlayer";
+
+const exampleContent = {
+  key: "example",
+  content: {
+    test: t({
+      en: ["Test", "Test2", "Test3"],
+      fr: ["Test", "Test2", "Test3"],
+      es: ["Test", "Test2", "Test3"],
+    }),
+  },
+};
+
+export default exampleContent;
+```
+
+Luego puedes usar el contenido así:
+
+```tsx
+import { useIntlayer } from "react-intlayer";
+
+const Example = () => {
+  const content = useIntlayer("example");
+
+  return (
+    <div>
+      {content.test.map((item) => (
+        <div key={item.value}>{item}</div>
+      ))}
+    </div>
+  );
+};
+```
+
+```vue
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("example");
+</script>
+
+<template>
+  <div>
+    <div v-for="item in content.test" :key="item.value">
+      {{ item }}
+    </div>
+  </div>
+</template>
+```
+
+`.value` te permite obtener el valor del contenido, no envuelto por un `IntlayerNode`.

package/frequent_questions/es/build_dictionaries.md

@@ -0,0 +1,59 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: ¿Cómo construir diccionarios?
+description: Aprende cómo construir diccionarios.
+keywords:
+  - construir
+  - diccionarios
+  - intlayer
+  - comando
+  - watch
+  - vscode
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - doc
+  - faq
+  - construir-diccionarios
+---
+
+# Construir Diccionarios
+
+## Cómo Construir Diccionarios
+
+Intlayer proporciona una herramienta de línea de comandos para construir diccionarios.
+
+```bash
+npx intlayer dictionaries build
+```
+
+Este comando:
+
+- Escanea todos los archivos de declaración de contenido (`.content.{ts,tsx,js,mjs,cjs,json,...}`) en tu proyecto.
+- Genera diccionarios y los almacena en la carpeta `.intlayer/dictionary`.
+
+### Modo Watch
+
+Si deseas actualizar automáticamente los diccionarios cuando se realicen cambios en los archivos de declaración de contenido, ejecuta el siguiente comando:
+
+```bash
+npx intlayer dictionaries build --watch
+```
+
+En este modo, Intlayer escaneará y construirá los diccionarios cada vez que se realicen cambios en los archivos de declaración de contenido y actualizará automáticamente la carpeta `.intlayer/dictionary`.
+
+### Usando la extensión de VSCode
+
+También puedes usar la [extensión de Intlayer para VSCode](https://github.com/aymericzip/intlayer/tree/main/docs/es/vs_code_extension.md) para mejorar tu experiencia con Intlayer en VSCode.
+
+### Usando el plugin para tu framework de aplicación favorito
+
+Si estás utilizando un framework como Next.js (Webpack / Turbopack), Vite, React Native, Lynx, etc., Intlayer proporciona un plugin que puedes usar para integrar Intlayer en tu aplicación.
+
+Intlayer construirá los diccionarios antes de la compilación de tu aplicación.
+De la misma manera, en modo desarrollo, Intlayer observará los cambios en tus archivos de declaración de contenido y reconstruirá los diccionarios automáticamente.
+
+Por lo tanto, consulta la documentación específica de tu framework para aprender cómo integrar el plugin.

package/frequent_questions/es/customized_locale_list.md

@@ -0,0 +1,65 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: ¿Cómo personalizar la lista de locales?
+description: Aprende cómo personalizar la lista de locales.
+keywords:
+  - locales
+  - lista
+  - intlayer
+  - configuración
+  - availableLocales
+  - defaultLocale
+  - useLocale
+  - hook
+  - locale
+  - lista
+slugs:
+  - doc
+  - faq
+  - lista-de-locales-personalizada
+---
+
+# ¿Es posible bloquear un tipo de idioma, como inglés? Estoy agregando inglés en mis diccionarios pero no quiero que el inglés esté disponible en el sitio web todavía
+
+Sí, puedes bloquear un tipo de idioma, como inglés, usando la opción `availableLocales` en la configuración de Intlayer.
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  locales: [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH],
+  availableLocales: [Locales.FRENCH, Locales.SPANISH],
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+o
+
+```ts
+import { IntlayerConfig } from "intlayer";
+
+const locales = [Locales.FRENCH, Locales.SPANISH, Locales.ENGLISH];
+
+const config: IntlayerConfig = {
+  locales,
+  availableLocales: locales.filter((locale) => locale !== Locales.ENGLISH),
+  defaultLocale: Locales.FRENCH,
+};
+```
+
+Esta configuración cambiará los tipos de tu función `t()` para incluir solo los locales disponibles.
+
+La opción availableLocales es opcional, si no la proporcionas, todos los locales estarán disponibles.
+
+Ten cuidado, todos los locales incluidos en la opción `availableLocales` deben estar incluidos en la opción `locales`.
+
+Ten en cuenta que si usas el hook `useLocale`, la opción `availableLocales` se utilizará para establecer el acceso a la lista de locales.
+
+```ts
+import { useLocale } from "intlayer";
+
+const { availableLocales } = useLocale();
+
+console.log(availableLocales); // [Locales.FRENCH, Locales.SPANISH]
+```

package/frequent_questions/es/domain_routing.md

@@ -0,0 +1,114 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: ¿Cómo configurar el enrutamiento basado en dominios?
+description: Aprende cómo configurar el enrutamiento basado en dominios.
+keywords:
+  - dominio
+  - enrutamiento
+  - intlayer
+  - configuración
+  - middleware
+  - react-router
+  - vue-router
+  - next.js
+  - vite
+  - framework
+slugs:
+  - doc
+  - faq
+  - enrutamiento-por-dominio
+---
+
+# ¿Cómo configuro el **enrutamiento basado en dominios** con Intlayer en lugar de rutas `/[locale]/`?
+
+## Respuesta corta
+
+El enrutamiento basado en dominios es más sencillo que el enrutamiento basado en rutas (`example.com/[locale]/`) porque puedes omitir todo el middleware y la configuración de enrutamiento. Solo despliega tu aplicación en cada dominio de idioma y configura una variable de entorno por dominio.
+
+## Paso a paso
+
+1. **Despliega una vez por dominio** (`example.com`, `exemple.fr`, `ejemplo.es`, …).
+2. Para cada despliegue, configura `LOCALE` (y las variables de entorno habituales de Intlayer) al idioma que ese dominio debe servir.
+3. Referencia esa variable como `defaultLocale` en tu archivo `intlayer.config.[ts|js]`.
+
+```ts
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: process.env.LOCALE, // 👈 el dominio decide el idioma
+  },
+  // ... resto de tu configuración
+};
+
+export default config;
+```
+
+Eso es todo—funciona igual para **Next.js**, **Vite + React**, **Vite + Vue**, etc.
+
+## ¿Qué pasa si todos los dominios apuntan al **mismo** despliegue?
+
+Si todos los dominios apuntan al mismo paquete de la aplicación, necesitarás detectar el host en tiempo de ejecución y pasar el idioma manualmente a través del proveedor.
+
+### Para Next.js
+
+```tsx
+// src/IntlayerProvider.tsx
+import {
+  IntlayerClientProvider,
+  type IntlayerClientProviderProps,
+} from "next-intlayer";
+import { IntlayerServerProvider } from "next-intlayer/server";
+import type { FC } from "react";
+
+export const IntlayerProvider: FC<IntlayerClientProviderProps> = ({
+  children,
+  locale,
+}) => {
+  const resolvedLocale = locale ?? getLocaleFromHostname(); // 👈 obtener el idioma desde el nombre del host si no está definido
+  return (
+    <IntlayerServerProvider locale={resolvedLocale}>
+      <IntlayerClientProvider locale={resolvedLocale}>
+        {children}
+      </IntlayerClientProvider>
+    </IntlayerServerProvider>
+  );
+};
+```
+
+### Para Vue
+
+```ts
+import { createApp } from "vue";
+import { installIntlayer } from "vue-intlayer";
+import App from "./App.vue";
+import { router } from "./routes";
+
+const app = createApp(App);
+app.use(router);
+installIntlayer(app, getLocaleFromHostname()); // 👈 reemplaza con tu propia lógica de búsqueda
+app.mount("#app");
+```
+
+Reemplaza `getLocaleFromHostname()` con tu propia lógica de búsqueda.
+
+## Actualiza tu selector de idioma
+
+Cuando usas enrutamiento basado en dominios, cambiar de idioma significa navegar a otro dominio:
+
+```ts
+const { locale } = useLocale();
+
+function changeLanguage(target: Locale) {
+  window.location.href = domainForLocale[target];
+}
+```
+
+## Beneficios del enrutamiento basado en dominios
+
+1. **Configuración más sencilla**: No es necesario configurar `intlayerMiddleware`, `generateStaticParams`, `react-router` o `vue-router`
+2. **Mejor SEO**: Cada idioma tiene su propio dominio
+3. **URLs más limpias**: No hay prefijo de idioma en la ruta
+4. **Mantenimiento más sencillo**: Cada despliegue de idioma es independiente

package/frequent_questions/es/esbuild_error.md

@@ -0,0 +1,30 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Error de ESBuild
+description: Aprende cómo solucionar errores de ESBuild.
+keywords:
+  - esbuild
+  - error
+  - intlayer
+  - plugin
+  - framework
+  - next.js
+  - vite
+  - react-native
+  - lynx
+slugs:
+  - doc
+  - faq
+  - esbuild-error
+---
+
+# Error de ESBuild
+
+Si encuentras un error de ESBuild durante el proceso de compilación, es probable que el plugin de Intlayer no esté configurado correctamente.
+
+ESBuild es responsable de leer los archivos de declaración de contenido (`.content.{ts,js,mjs,cjs,json}`) y generar los diccionarios correspondientes en la carpeta `.intlayer/dictionary`. Así como de leer el archivo de configuración (`intlayer.config.ts`).
+
+Intlayer proporciona plugins para integrarse con tus empaquetadores. Está diseñado para alias de componentes que están destinados a ejecutarse solo del lado del servidor.
+
+Si estás utilizando un framework como Next.js (Webpack / Turbopack), Vite, React Native, Lynx, etc., Intlayer proporciona un plugin que puedes usar para integrar Intlayer en tu aplicación. Por lo tanto, consulta la documentación específica de tu framework para aprender cómo integrar el plugin.

package/frequent_questions/es/get_locale_cookie.md

@@ -0,0 +1,143 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Cómo recuperar la configuración regional desde las cookies / encabezados
+description: Aprende cómo recuperar la configuración regional desde las cookies / encabezados.
+keywords:
+  - cookie
+  - encabezados
+  - intlayer
+  - configuración regional
+  - hook
+  - useLocale
+  - useLocaleCookie
+  - next.js
+  - react-intlayer
+  - vue-intlayer
+slugs:
+  - doc
+  - faq
+  - obtener-configuracion-regional-cookie
+---
+
+# Cómo recuperar la configuración regional desde las cookies / encabezados
+
+## Uso de Hooks (Recomendado)
+
+Para la mayoría de los casos, se recomienda recuperar la configuración regional actual usando el hook `useLocale` porque se resuelve automáticamente. Esto funciona de manera similar al composable `useLocale` en Vue.js.
+
+```ts
+import { useLocale } from "next-intlayer";
+// or import { useLocale } from "react-intlayer";
+// or import { useLocale } from "vue-intlayer";
+
+// Uso en el lado del cliente
+const { locale } = useLocale();
+```
+
+Para componentes del servidor, puedes importarlo desde:
+
+```tsx
+import { useLocale } from "next-intlayer/server";
+
+const Test = () => {
+  const { locale } = useLocale();
+  return <>{locale}</>;
+};
+
+const Page = async ({ params }) => {
+  const { locale } = await params;
+
+  return (
+    <IntlayerServerProvider locale={locale}>
+      <Test />
+    </IntlayerServerProvider>
+  );
+};
+```
+
+También existe un hook `useLocaleCookie` que solo resuelve el valor de la cookie.
+
+## Configuración manual de la cookie
+
+Puedes declarar un nombre personalizado para la cookie como
+
+```ts
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  middleware: {
+    cookieName: "myCustomLocaleCookie", // el valor por defecto es 'intlayer-locale'
+  },
+};
+
+export default config;
+```
+
+recuperarlo como
+
+### Lado del cliente
+
+```ts
+// Usando el nombre de cookie por defecto
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("intlayer-locale="))
+  ?.split("=")[1];
+
+// Usando un nombre de cookie personalizado
+const locale = document.cookie
+  .split("; ")
+  .find((row) => row.startsWith("myCustomLocaleCookie="))
+  ?.split("=")[1];
+```
+
+### Lado del servidor (Next.js)
+
+```ts
+import { cookies } from "next/headers";
+
+// Usando el nombre de cookie por defecto
+const locale = cookies().get("intlayer-locale")?.value;
+
+// Usando un nombre de cookie personalizado
+const locale = cookies().get("myCustomLocaleCookie")?.value;
+```
+
+### Si la locale aún no está establecida
+
+La locale se establece como una cookie solo una vez que el usuario selecciona explícitamente la locale. Por defecto, para nuevos visitantes, la locale se interpreta a partir de los campos de los encabezados.
+
+Puedes detectar la configuración regional preferida del usuario a partir de las cabeceras de la solicitud. Aquí tienes un ejemplo de cómo manejar esto:
+
+```ts
+/**
+ * Detecta la configuración regional a partir de las cabeceras de la solicitud
+ *
+ * La cabecera accept-language es la más importante para la detección de la configuración regional.
+ * Contiene una lista de códigos de idioma con valores de calidad (q-values) que indican
+ * los idiomas preferidos por el usuario en orden de preferencia.
+ *
+ * Ejemplo: "en-US,en;q=0.9,fr;q=0.8,es;q=0.7"
+ * - en-US es el idioma principal (q=1.0 está implícito)
+ * - en es la segunda opción (q=0.9)
+ * - fr es la tercera opción (q=0.8)
+ * - es es la cuarta opción (q=0.7)
+ */
+import { localeDetector } from "@intlayer/core";
+
+/**
+ * Ejemplo de cabeceras negociadoras que los navegadores suelen enviar
+ * Estas cabeceras ayudan a determinar el idioma preferido del usuario
+ */
+const exampleNegotiatorHeaders: Record<string, string> = {
+  "accept-language": "en-US,en;q=0.9,fr;q=0.8,es;q=0.7",
+  "accept":
+    "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8",
+  "user-agent":
+    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
+};
+
+// Ejemplo de uso:
+const detectedLocale = localeDetector(exampleNegotiatorHeaders);
+```

package/frequent_questions/es/intlayer_command_undefined.md

@@ -0,0 +1,157 @@
+---
+createdAt: 2025-05-20
+updatedAt: 2025-06-29
+title: Comando Intlayer indefinido
+description: Aprende cómo solucionar el error de comando intlayer indefinido.
+keywords:
+  - intlayer
+  - comando
+  - indefinido
+  - error
+  - vscode
+  - extensión
+  - plugin
+  - framework
+  - next.js
+  - vite
+slugs:
+  - doc
+  - faq
+  - comando-intlayer-indefinido
+---
+
+# Comando Intlayer indefinido
+
+## Resumen
+
+La CLI de Intlayer proporciona una forma conveniente de controlar tu contenido intlayer, incluyendo la construcción de diccionarios, el envío de traducciones y más. Sin embargo, no es esencial para que tu proyecto funcione. Si estás utilizando el plugin del empaquetador (como `withIntlayer()` para Next.js o `intlayerPlugin()` para Vite), Intlayer construirá automáticamente los diccionarios durante la compilación de la aplicación o el inicio del servidor de desarrollo. En modo desarrollo, también observará los cambios y reconstruirá automáticamente los archivos de declaración de contenido.
+
+Puedes acceder a los comandos de intlayer de diferentes maneras:
+
+- Usando el comando CLI `intlayer` directamente
+- Usando la [extensión de VSCode](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)
+- Usando el SDK `@intlayer/cli`
+
+## Problema
+
+Al intentar usar el comando `intlayer`, podrías encontrar este error:
+
+```bash
+'intlayer' no se reconoce como un comando interno o externo,
+programa o archivo por lotes ejecutable.
+```
+
+## Soluciones
+
+Prueba estas soluciones en orden:
+
+1. **Verifica que el comando esté instalado**
+
+```bash
+npx intlayer -h
+```
+
+Salida esperada:
+
+```bash
+Usage: intlayer [options] [command]
+
+Intlayer CLI
+
+Options:
+    -V, --version            output the version number
+    -h, --help               display help for command
+
+Commands:
+    dictionary|dictionaries  Dictionaries operations
+    configuration|config     Configuration operations
+    help [command]           display help for command
+```
+
+2. **Instala el paquete intlayer-cli globalmente**
+
+```bash
+npm install intlayer-cli -g -g
+```
+
+> No debería ser necesario si ya has instalado el paquete `intlayer`
+
+3. **Instala el paquete globalmente**
+
+```bash
+npm install intlayer -g
+```
+
+4. **Reinicia tu terminal**
+   A veces es necesario reiniciar el terminal para que reconozca nuevos comandos.
+
+5. **Limpia y reinstala**
+   Si las soluciones anteriores no funcionan:
+
+```bash
+rm -rf node_modules package-lock.json
+npm install
+```
+
+6. **Verifica los archivos de instalación**
+   Si el problema persiste, verifica que estos archivos existan:
+
+   - `node_modules/intlayer/dist/cjs/cli.cjs`
+   - `node_modules/intlayer/package.json` (debería tener un campo `bin` que referencia a `./dist/cjs/cli.cjs`)
+
+7. **Verifica la variable de entorno PATH**
+   Asegúrate de que el directorio global bin de npm esté en tu PATH:
+
+```bash
+# Para sistemas basados en Unix (macOS/Linux)
+echo $PATH
+# Debería incluir algo como /usr/local/bin o ~/.npm-global/bin
+
+# Para Windows
+echo %PATH%
+# Debería incluir el directorio bin global de npm
+```
+
+8. **Usa npx con la ruta completa**
+   Si el comando aún no se encuentra, intenta usar npx con la ruta completa:
+
+```bash
+npx ./node_modules/intlayer/ dictionaries build
+```
+
+9. **Verifica instalaciones conflictivas**
+
+```bash
+# Lista todos los paquetes instalados globalmente
+npm list -g --depth=0
+
+# Elimina cualquier instalación global conflictiva
+npm uninstall -g intlayer
+npm uninstall -g intlayer-cli
+# Luego reinstala
+npm install -g intlayer
+```
+
+10. **Verifica las versiones de Node.js y npm**
+    Asegúrate de usar versiones compatibles:
+
+```bash
+node --version
+npm --version
+```
+
+    Si estás usando una versión desactualizada, considera actualizar Node.js y npm.
+
+11. **Verifica problemas de permisos**  
+    Si estás obteniendo errores de permisos:
+
+    ```bash
+    # Para sistemas basados en Unix
+    sudo npm install -g intlayer
+
+    # O cambia el directorio predeterminado de npm
+    mkdir ~/.npm-global
+    npm config set prefix '~/.npm-global'
+    # Agrega a tu ~/.profile o ~/.bashrc:
+    export PATH=~/.npm-global/bin:$PATH
+    ```