@intlayer/docs 9.4.0 → 9.4.2

package/docs/es/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-08-25
+updatedAt: 2026-08-30
 title: "TanStack Start i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación TanStack Start multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -64,7 +64,6 @@ Esta guía demuestra cómo integrar **Intlayer** para una internacionalización
 En comparación con soluciones principales como `react-i18next` o `use-intl`, o `paraglide`, Intlayer es una solución que viene con optimizaciones integradas como:
 
 <AccordionGroup>
-
 <Accordion header="Soporte completo de TanStack Start">
 
 Intlayer está completamente optimizado para TanStack Start y proporciona **enrutamiento multilingüe**, **administración de cookies**, **generación de mapas de sitio**, **carga de contenido dinámico** y todas las funciones necesarias para escalar sus esfuerzos de internacionalización (i18n).
@@ -651,8 +650,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 }
 ```
 
----
-
 </Step>
 
 <Step number={11} title="Agregar middleware">
@@ -689,8 +686,6 @@ export default defineConfig({
 });
 ```
 
----
-
 </Step>
 
 <Step number={12} title="Internacionalizar tus Metadatos">
@@ -884,8 +879,6 @@ Mantienes el chunk por localización sin pagar su costo en la ruta crítica del
 | Navegaciones de cliente       | nothing to resolve    | re-entered on every match  | served from the router cache           |
 | Experiencia del desarrollador | simplest              | one `await`                | content threaded through `loaderData`  |
 
----
-
 </Step>
 
 <Step number={13} title="Recuperar la localización en tus acciones de servidor">
@@ -923,141 +916,85 @@ export const getLocaleServer = createServerFn().handler(async () => {
 });
 ```
 
----
-
 </Step>
 
 <Step number={14} title="Gestionar páginas no encontradas">
 
-Cuando un usuario visita una página que no existe, puedes mostrar una página personalizada de no encontrado y el prefijo de localización puede impactar la forma en que se dispara la página de no encontrado.
-
-#### Página de inicio localizada
+Cuando un usuario visita una página que no existe, puedes mostrar una página de no encontrado personalizada y el prefijo de configuración regional puede afectar la forma en que se activa la página de no encontrado.
 
-> Si deseas usar tu contenido en un atributo `string`, como `alt`, `title`, `href`, `aria-label`, etc., puedes usar el valor de la función, así:
->
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
-> ```
-
-> Para obtener más información sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useIntlayer.md).
-
-</Step>
-
-```tsx fileName="src/components/locale-switcher.tsx"
-import { useLocation } from "@tanstack/react-router";
-import {
-  getHTMLTextDir,
-  getLocaleName,
-  getPathWithoutLocale,
-  getPrefix,
-  Locales,
-} from "intlayer";
-import type { FC } from "react";
-import { useLocale } from "react-intlayer";
+#### Entender el manejo de 404 de TanStack Router con prefijos de configuración regional
 
-import { LocalizedLink, type To } from "./localized-link";
+En TanStack Router, el manejo de páginas 404 con rutas localizadas requiere un enfoque multicapa:
 
-export const LocaleSwitcher: FC = () => {
-  const { pathname } = useLocation();
+1. **Ruta 404 dedicada**: Una ruta específica para mostrar la interfaz de usuario 404.
+2. **Validación a nivel de ruta**: Valida los prefijos de configuración regional y redirige los inválidos a 404.
+3. **Ruta catch-all**: Captura cualquier ruta no coincidente dentro del segmento de configuración regional.
 
-  const { availableLocales, locale, setLocale } = useLocale();
+```tsx fileName="src/routes/{-$locale}/404.tsx"
+import { createFileRoute } from "@tanstack/react-router";
 
-  const pathWithoutLocale = getPathWithoutLocale(pathname);
+// Esto crea una ruta dedicada /[locale]/404
+// Se utiliza tanto como una ruta directa como importada como componente en otros archivos
+export const Route = createFileRoute("/{-$locale}/404")({
+  component: NotFoundComponent,
+});
 
+// Exportado por separado para que pueda reutilizarse en notFoundComponent y rutas catch-all
+export function NotFoundComponent() {
   return (
-    <ol>
-      {availableLocales.map((localeEl) => (
-        <li key={localeEl}>
-          <LocalizedLink
-            aria-current={localeEl === locale ? "page" : undefined}
-            onClick={() => setLocale(localeEl)}
-            params={{ locale: getPrefix(localeEl).localePrefix }}
-            to={pathWithoutLocale as To}
-          >
-            <span>
-              {/* Configuración regional - p. ej. FR */}
-              {localeEl}
-            </span>
-            <span>
-              {/* Idioma en su propia configuración regional - p. ej. Français */}
-              {getLocaleName(localeEl, locale)}
-            </span>
-            <span dir={getHTMLTextDir(localeEl)} lang={localeEl}>
-              {/* Idioma en la configuración regional actual - p. ej. Francés con la configuración regional actual establecida en Locales.SPANISH */}
-              {getLocaleName(localeEl)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* Idioma en inglés - p. ej. French */}
-              {getLocaleName(localeEl, Locales.ENGLISH)}
-            </span>
-          </LocalizedLink>
-        </li>
-      ))}
-    </ol>
+    <div>
+      <h1>404</h1>
+    </div>
   );
-};
-```
-
-> Para obtener más información sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md).
-
-</Step>
-
-<Step number={10} title="Gestión de atributos HTML">
-
-return (
-<html dir={getHTMLTextDir(locale)} lang={locale}>
-{/* ... _/}
-</html>
-);
-} {/_ ... */}
-</html>
-);
 }
+```
 
-export const Route = createFileRoute("/{-$locale}/")({
-component: RouteComponent,
-head: async ({ params }) => {
-const { locale = defaultLocale } = params;
-const path = "/"; // The path for this route
-
-    const metaContent = await getIntlayerAsync("app", locale);
-
-````
-
-> Si un `head` lee varios diccionarios, resuélvelos con `Promise.all`: esperar cada `getIntlayerAsync` en su propia línea encadena las peticiones en lugar de ejecutarlas en paralelo.
-
-La contrapartida: el import dinámico se resuelve mientras se ejecuta `head`, en la ruta crítica del renderizado del documento. En una ruta fría esto retrasa el `head` unos milisegundos y puede degradar ligeramente el **LCP**.
-
-</Tab>
-
-<Tab label="Resolución dinámica cacheada" value="cached">
-
-Resuelve el diccionario en el `loader` de la ruta y vuelve a leerlo desde `loaderData` en `head`. Los loaders de las rutas coincidentes se ejecutan en paralelo, y `staleTime: Infinity` le indica a TanStack Router que el resultado nunca caduca, de modo que el chunk por locale se resuelve una sola vez y luego se sirve desde la caché del router, dejando `head` síncrono.
+```tsx fileName="src/routes/{-$locale}/route.tsx"
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import { validatePrefix } from "intlayer";
+import { NotFoundComponent } from "./404";
 
-```tsx fileName="src/routes/{-$locale}/index.tsx"
+export const Route = createFileRoute("/{-$locale}")({
+  // beforeLoad se ejecuta antes de que la ruta se renderice (tanto en el servidor como en el cliente)
+  // Es el lugar ideal para validar el prefijo de configuración regional
+  beforeLoad: ({ params }) => {
+    const localeParam = params.locale;
 
-<Tabs>
- <Tab value='Extract command'>
+    // validatePrefix comprueba si la configuración regional es válida según tu configuración de intlayer
+    const { isValid, localePrefix } = validatePrefix(localeParam);
 
-  return { locale, content };
+    if (!isValid) {
+      // Prefijo de configuración regional inválido - redirigir a la página 404 con un prefijo de configuración regional válido
+      throw redirect({
+        to: "/{-$locale}/404",
+        params: { locale: localePrefix },
+      });
+    }
+  },
+  component: Outlet,
+  // notFoundComponent se llama cuando una ruta hija no existe
+  // p. ej., /en/pagina-inexistente activa esto dentro del diseño /en
+  notFoundComponent: NotFoundComponent,
 });
-import { createFileRoute } from "@tanstack/react-router";
-
-````
-
-```tsx fileName="src/routes/{-$locale}/route.tsx"
-
 ```
 
 ```tsx fileName="src/routes/{-$locale}/$.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+
 import { NotFoundComponent } from "./404";
+
+// La ruta $ (splat/catch-all) coincide con cualquier ruta que no coincida con otras rutas
+// p. ej., /en/algun/camino/profundo/anidado/invalido
+// Esto garantiza que TODAS las rutas no coincidentes dentro de una configuración regional muestren la página 404
+// Sin esto, las rutas profundas no coincidentes podrían mostrar una página en blanco o un error
+export const Route = createFileRoute("/{-$locale}/$")({
+  component: NotFoundComponent,
+});
 ```
 
 </Step>
 
-<Step number={15} title="Extraer el contenido de tus componentes" isOptional={true}>
+<Step number={15} title="Extraer el contenido de tus componentes" isOptional={true}> isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
 
@@ -1068,11 +1005,24 @@ Para configurarlo, puedes agregar una sección `compiler` en tu archivo `intlaye
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { type IntlayerConfig } from "intlayer";
 
+const config: IntlayerConfig = {
+  // ... Resto de tu configuración
+  compiler: {
+    /**
+     * Indica si el compilador debe estar habilitado.
+     */
+    enabled: true,
+
     /**
      * Define la ruta de los archivos de salida
      */
     output: ({ fileName, extension }) => `./${fileName}${extension}`,
 
+    /**
+     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
+     */
+    saveComponents: false,
+
     /**
      * Prefijo de clave de diccionario
      */
@@ -1084,39 +1034,75 @@ export default config;
 ```
 
 <Tabs>
- <Tab value='Comando de extracción'>
+ <Tab value="Comando de extracción">
 
 Ejecuta el extractor para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
-
+npx intlayer extract
 ```
 
 ```bash packageManager="pnpm"
-
+pnpm intlayer extract
 ```
 
 ```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value="Compilador Babel">
+
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
+Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adds the compiler plugin
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # O npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # O pnpm run dev
+```
 
+```bash packageManager="yarn"
+yarn build # O yarn dev
 ```
 
 ```bash packageManager="bun"
+bun run build # Or bun run dev
+```
 
-</Tab>
+ </Tab>
 </Tabs>
 
----
+</Step>
 
-- **BLOCK 3 of 4** (English reference): empty
-- **BLOCK 3 of 4** (Spanish current): empty
+<Step number={16} title="Generar un Sitemap">
 
-Could you please provide:
-1. The English source content (base file)
-2. The current Spanish translation that needs to be audited
+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.
 
-Once you share the actual content, I'll perform a thorough audit and return the fully updated Spanish file.---
+> 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.
 
-bun run build # Or bun run dev
+Para usarlo, primero debes configurar tu archivo `vite.config.ts` para habilitar el prerrenderizado de tus rutas localizadas y deshabilitar la generación de sitemap predeterminada de TanStack Start.
+
+```typescript fileName="vite.config.ts"
 import { localeFlatMap } from "intlayer";
 // ... otras importaciones
 
@@ -1152,22 +1138,13 @@ export default defineConfig({
 
 Luego, crea una ruta `src/routes/sitemap[.]xml.ts` que use la función `generateSitemap`:
 
-````typescript fileName="src/routes/sitemap[.]xml.ts"
-
----
-
-</Step>
-
-<Step number={17} title="Configurar TypeScript">
-
-I'm ready to help you audit and update the Spanish (es) translation. However, I notice that the content blocks appear to be empty in your message.
-
-Could you please provide:
-
-1. **BLOCK 4 of 4** (the current Spanish translation to review) - between the `` and `` markers
-2. Confirm that this is indeed the final block, or if there are preceding blocks I should be aware of
+```typescript fileName="src/routes/sitemap[.]xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
 
-Please share the content to be reviewed.---
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
 
 export const Route = createFileRoute("/sitemap.xml")({
   server: {
@@ -1188,6 +1165,17 @@ export const Route = createFileRoute("/sitemap.xml")({
     },
   },
 });
+```
+
+</Step>
+
+<Step number={17} title="Configurar TypeScript">
+
+Intlayer utiliza la ampliación de módulos para obtener los beneficios de TypeScript y fortalecer tu base de código.
+
+Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados:
+
+```json5 fileName="tsconfig.json"
 {
   // ... tus configuraciones existentes
   include: [
@@ -1195,17 +1183,22 @@ export const Route = createFileRoute("/sitemap.xml")({
     ".intlayer/**/*.ts", // Incluir los tipos autogenerados
   ],
 }
+```
+
+</Step>
+
+</Steps>
 
 ### Configuración de Git
 
-Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar hacer commit de ellos en tu repositorio de Git.
+Se recomienda ignorar los archivos generados por Intlayer. Esto te permite evitar confirmarlos en tu repositorio de Git.
 
-Para hacer esto, puedes añadir las siguientes instrucciones a tu archivo `.gitignore`:
+Para ello, puedes añadir las siguientes instrucciones a tu archivo `.gitignore`:
 
 ```plaintext fileName=".gitignore"
 # Ignorar los archivos generados por Intlayer
 .intlayer
-````
+```
 
 ---
 
@@ -1240,3 +1233,115 @@ Para ir más allá, puedes implementar el [editor visual](https://github.com/aym
 - [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useLocale.md)
 - [Declaración de Contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md)
 - [Configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md)
+
+## Preguntas frecuentes
+
+<FAQ>
+
+<Question title="¿Qué soluciones existen para internacionalizar una aplicación de TanStack Start?">
+
+TanStack Start no incluye ninguna capa de i18n propia, así que la elección es una biblioteca:
+
+- **`i18next` / `react-i18next`** y **`react-intl`**: catálogos de mensajes agnósticos al framework, conectados manualmente al router.
+- **`Lingui`**: mensajes ICU con un paso de compilación.
+- **`Intlayer`**: contenido declarado junto a cada componente y compilado en tiempo de compilación, con claves tipadas, enrutamiento por idioma, generación de sitemap, traducción con IA, un editor visual y un CMS.
+
+La diferencia que importa en TanStack Start es el enrutamiento y el renderizado en el servidor. Intlayer se integra con el router basado en archivos, la función `head` y la pasada de prerenderizado, en lugar de dejarte montar a mano un proveedor, un detector de idioma y un sitemap. Consulta [por qué Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md) y el [benchmark de i18n de TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="¿Cuánto añade la i18n al tamaño del bundle de mi aplicación TanStack Start?">
+
+Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. El marcado renderizado en el servidor resuelve su contenido en el servidor, y el compilador de tiempo de compilación reemplaza las llamadas a `useIntlayer` por las entradas de diccionario exactas que usa un componente, de modo que se descartan las claves sin usar y los idiomas sin usar, y los [diccionarios dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md) reparten el resto por idioma. Frente a las alternativas habituales, Intlayer reduce el tamaño del bundle y de la página hasta en un 50%. Consulta la [optimización del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/tanstack.md).
+
+</Question>
+
+<Question title="¿Puedo migrar desde `react-i18next` o `react-intl` sin reescribir mis componentes?">
+
+Sí, y hay dos caminos. Puedes migrar el contenido de forma progresiva con la [guía de migración de react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_react-i18next_to_intlayer.md) o la [guía de migración de i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_i18next_to_intlayer.md). O puedes mantener tu API actual por completo: los [adaptadores de compatibilidad](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/index.md) exponen exactamente la misma API que `react-i18next`, `react-intl` y `i18next`, pero servida por diccionarios de Intlayer, así que cambian los imports y el código de los componentes no.
+
+</Question>
+
+<Question title="¿Puedo conservar mis archivos de traducción JSON existentes?">
+
+Sí. El [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus archivos `/messages/{locale}/{namespace}.json` como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, en ambas direcciones. Un [plugin de sincronización PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-po.md) hace lo mismo para los catálogos gettext, y los [archivos por idioma](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/per_locale_file.md) te permiten dividir el contenido por idioma en lugar de agrupar los idiomas en un solo archivo.
+
+</Question>
+
+<Question title="¿Tengo que trasladar mi contenido clave por clave?">
+
+No. Ejecuta `npx intlayer extract` e Intlayer lee tus componentes, extrae las cadenas visibles para el usuario y escribe un archivo `.content` junto a cada uno, así que revisas un diff en lugar de copiar cadenas a un catálogo una por una. El paso 15 de esta guía lo explica paso a paso.
+
+Para una canalización totalmente automatizada, el [compilador de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) hace lo mismo en tiempo de compilación: escanea tu código JSX, TSX, Vue y Svelte en cada cambio, genera los diccionarios y los mantiene sincronizados mediante el reemplazo de módulos en caliente, así que no hay ninguna clave que mantener a mano.
+
+Conviene conocer dos límites antes de activar el compilador. Funciona por análisis estático, así que las cadenas que solo existen en tiempo de ejecución, como los códigos de error de la API o los campos del CMS, quedan fuera de su alcance. Y tiene que distinguir el texto visible para el usuario de la lógica de la aplicación, como `className="active"` o un código de estado, lo que requiere unas pocas anotaciones en una base de código grande. El [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) evita ambos manteniéndote en el proceso.
+
+</Question>
+
+<Question title="¿Qué herramientas para editores y agentes de IA están disponibles?">
+
+Cinco piezas, todas opcionales:
+
+- **[Extensión de VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)**: salta de una clave `useIntlayer` al archivo de contenido que la declara, extrae contenido de un componente y ejecuta build, fill, test, push y pull desde la paleta de comandos o desde una pestaña de Intlayer dedicada.
+- **[Servidor LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**: el mismo conocimiento en cualquier editor que hable LSP, con ir a la definición, buscar todas las referencias, vistas previas al pasar el cursor de un valor traducido, autocompletado de claves y campos, y un aviso cuando una clave no está declarada en ninguna parte. También resuelve las llamadas a `i18next`, `react-i18next`, `next-intl` y `use-intl`, lo que ayuda durante la migración.
+- **[Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**: expone la documentación y la CLI de Intlayer a Cursor, VS Code, Claude Desktop, Claude Code y ChatGPT, para que un asistente responda a partir de la documentación actual en lugar de adivinar, y pueda ejecutar comandos como `intlayer fill` por sí mismo.
+- **[Habilidades para agentes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**: habilidades específicas como `intlayer-config`, `intlayer-cli` e `intlayer-content`, además de una por framework, que enseñan a un agente tu configuración de enrutamiento y los tipos de nodo de contenido.
+- **[Plugin de ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/eslint.md)**: `no-raw-text` marca las cadenas codificadas de forma fija, con reglas adicionales para claves de diccionario estáticas y contenido sin usar.
+
+</Question>
+
+<Question title="¿Intlayer admite el renderizado en el servidor y el prerenderizado en TanStack Start?">
+
+Sí. El contenido se resuelve durante el SSR, y la guía cubre la configuración de prerenderizado que emite un documento estático por ruta localizada. El paso 16 muestra cómo activar `prerender` en `vite.config.ts` y generar un sitemap localizado a partir de la misma tabla de rutas.
+
+</Question>
+
+<Question title="¿Cómo añado etiquetas hreflang y un sitemap localizado?">
+
+Usa la función `generateSitemap` integrada en una ruta `src/routes/sitemap[.]xml.ts`. A diferencia de una lista simple de URL, emite el espacio de nombres `xhtml:link`, así que cada versión de idioma de una página enlaza bidireccionalmente con las demás y los motores de búsqueda indexan la correcta para cada audiencia. Los metadatos localizados de `head` se cubren en el paso 12.
+
+</Question>
+
+<Question title="¿Tengo que poner el idioma en la URL?">
+
+No. `routing.mode` controla el esquema de URL: `"prefix-no-default"` (el valor por defecto, `/about` y `/fr/about`), `"prefix-all"` (`/en/about`), `"no-prefix"` (resuelto a partir de cookie, cabecera o dominio) o `"search-params"` (`/about?locale=fr`). Los idiomas también se pueden asignar a dominios distintos con `routing.domains`. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
+
+</Question>
+
+<Question title="¿Cómo creo un selector de idioma que conserve la ruta actual?">
+
+Usa `useLocale` junto con el componente de enlace localizado descrito en el paso 9. `useLocale` expone el idioma activo, los idiomas disponibles y un setter que conserva la elección, mientras que `getLocalizedUrl` reescribe la ruta actual al idioma de destino para que el usuario permanezca en la misma página en lugar de aterrizar en la página de inicio.
+
+</Question>
+
+<Question title="¿Cómo gestiono las páginas 404 en rutas localizadas?">
+
+Lo cubre el paso 14. `validatePrefix` te indica si el segmento de idioma de la URL es un idioma declarado, así que `/xx/about` devuelve un 404 real en lugar de tratarse como una ruta. Sin él, un prefijo desconocido se resuelve en silencio y los motores de búsqueda indexan una página duplicada.
+
+</Question>
+
+<Question title="¿Cómo traduzco una aplicación TanStack Start automáticamente con IA?">
+
+Ejecuta `npx intlayer fill`. La CLI encuentra las traducciones que faltan y las rellena con el LLM de tu elección, usando tu propio proveedor y tu clave de API. Añade `--git-diff` para traducir solo el contenido modificado en la rama actual, lo que mantiene baratas las ejecuciones de CI. Consulta el [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/fill.md) y la [integración de CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/CI_CD.md).
+
+</Question>
+
+<Question title="¿Intlayer admite plurales, género y texto enriquecido?">
+
+Sí. Las declaraciones de contenido admiten [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plurial.md), [contenido según el género](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/gender.md), condiciones, [inserciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md) y [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/markdown.md) para texto extenso, con [formateadores](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/formatters.md) para números, fechas y monedas.
+
+</Question>
+
+<Question title="¿Cómo pueden los traductores editar el contenido sin tocar el código?">
+
+A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en el sitio en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
+
+</Question>
+
+<Question title="¿Es Intlayer gratuito y de código abierto?">
+
+Sí, bajo la licencia Apache 2.0, uso comercial incluido. El CMS alojado es un servicio de pago opcional que también puede [autoalojarse](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).
+
+</Question>
+
+</FAQ>