Creation:2025-11-20Last update:2026-05-31

    Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

    ide.intlayer.org

    Tabla de Contenidos

    ¿Por qué Intlayer en lugar de alternativas?

    En comparación con soluciones principales como svelte-i18n o i18next, Intlayer es una solución que viene con optimizaciones integradas como:

    Intlayer está optimizado para funcionar perfectamente con SvelteKit al ofrecer enrutamiento multilingüe, soporte SSR y todas las funciones necesarias para escalar la internacionalización (i18n).

    En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a reducir el tamaño de su bundle y de sus páginas hasta en un 50%.

    Determinar el alcance del contenido de su aplicación facilita el mantenimiento para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está completamente escrito para garantizar la precisión de su contenido.

    La ubicación conjunta de contenido reduce el contexto necesario para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una CLI para comprobar si faltan traducciones,LSP, MCP y agent skills, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.

    Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su proveedor de IA. Intlayer también ofrece un compilador para automatizar la extracción de contenido, así como una plataforma web para ayudar a traducir en segundo plano.

    La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.

    Más que una simple solución i18n, Intlayer proporciona un [editor visual] autohospedado(/es/doc/concept/editor) y un CMS completo para ayudarle a administrar su contenido multilingüe en tiempo real, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.

    Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

    Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    1. Instalar dependencias

      Instala los paquetes necesarios usando npm:

      bash
      npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
      • intlayer: El paquete principal de i18n.
      • svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
      • vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

    2. Configuración de tu proyecto

      Crea un archivo de configuración en la raíz de tu proyecto:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

    3. Integra Intlayer en tu configuración de Vite

      Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

      vite.config.ts
      import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

    4. Declara Tu Contenido

      Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta src (por ejemplo, src/lib/content o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función t() para cada locale.

    5. Utiliza Intlayer en Tus Componentes

      Ahora puedes usar la función useIntlayer en cualquier componente Svelte. Esta devuelve una tienda reactiva que se actualiza automáticamente cuando cambia el locale. La función respetará automáticamente el locale actual (tanto durante SSR como en la navegación del lado del cliente).

      Nota: useIntlayer devuelve una tienda de Svelte, por lo que necesitas usar el prefijo `--- createdAt: 2025-11-20 updatedAt: 2026-05-31 title: Cómo traducir tu aplicación SvelteKit – Guía i18n 2026 description: Descubre cómo hacer que tu sitio web SvelteKit sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducir usando Server-Side Rendering (SSR). keywords:

      Traduce tu sitio web SvelteKit usando Intlayer | Internacionalización (i18n)

    Tabla de Contenidos

    ¿Qué es Intlayer?

    Intlayer es una biblioteca innovadora y de código abierto para internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas. Funciona perfectamente con las capacidades de Server-Side Rendering (SSR) de SvelteKit.

    Con Intlayer, puedes:

    • Gestionar traducciones fácilmente usando diccionarios declarativos a nivel de componente.
    • Localizar dinámicamente metadatos, rutas y contenido.
    • Garantizar soporte para TypeScript con tipos autogenerados.
    • Aprovechar el SSR de SvelteKit para una internacionalización amigable con SEO.

    Guía paso a paso para configurar Intlayer en una aplicación SvelteKit

    Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final que crearemos:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    1. Instalar dependencias

      Instala los paquetes necesarios usando npm:

      bash
      npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
      • intlayer: El paquete principal de i18n.
      • svelte-intlayer: Proporciona context providers y stores para Svelte/SvelteKit.
      • vite-intlayer: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.

    2. Configuración de tu proyecto

      Crea un archivo de configuración en la raíz de tu proyecto:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

    3. Integra Intlayer en tu configuración de Vite

      Actualiza tu vite.config.ts para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.

      vite.config.ts
      import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // el orden importa, Intlayer debe ir antes que SvelteKit});

    4. Declara Tu Contenido

      Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta src (por ejemplo, src/lib/content o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función t() para cada locale.

    5. Utiliza Intlayer en Tus Componentes

      para acceder a su valor reactivo (por ejemplo, $content.title).

      src/lib/components/Component.svelte
      <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" corresponde a la clave definida en el Paso 4  const content = useIntlayer("hero-section");</script><!-- Renderizar contenido como contenido simple  --><h1>{$content.title}</h1><!-- Para renderizar el contenido editable usando el editor --><h1>{@const Title = $content.title}<Title /></h1><!-- Para renderizar el contenido como una cadena --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

    6. Configurar el enrutamiento

      Opcional

      Los siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, /en/about, /fr/about) para mejorar el SEO y la experiencia del usuario.

      bash
      .└─── src    ├── app.d.ts                  # Definir el tipo de locale    ├── hooks.server.ts           # Gestionar el enrutamiento del locale    ├── lib    │   └── getLocale.ts          # Comprobar el locale desde el header, cookies    ├── params    │   └── locale.ts             # Definir el parámetro locale    └── routes        ├── [[locale=locale]]     # Envolver en un grupo de rutas para establecer el locale        │   ├── +layout.svelte    # Diseño local para la ruta        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Diseño raíz para fuentes y estilos globales

    7. Manejar la detección del locale en el servidor

      En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos hooks.server.ts para detectar el locale desde la URL o las cookies.

      Crea o modifica src/hooks.server.ts:

      src/hooks.server.ts
      import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Verifica si la ruta actual ya comienza con una locale (ej. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Si NO hay una locale presente en la URL (ej. el usuario visita "/"), redirígelo  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Redirección temporal    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

      Luego, crea un helper para obtener la locale del usuario desde el evento de la solicitud:

      src/lib/getLocale.ts
      import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Obtiene la configuración regional del usuario a partir del evento de la solicitud. * Esta función se utiliza en el hook `handle` en `src/hooks.server.ts`. * * Primero intenta obtener la configuración regional desde el almacenamiento de Intlayer (cookies o encabezados personalizados). * Si no se encuentra la configuración regional, recurre a la negociación "Accept-Language" del navegador. * * @param event - El evento de solicitud de SvelteKit * @returns La configuración regional del usuario */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intentar obtener la configuración regional desde el almacenamiento de Intlayer (Cookies o encabezados)  const storedLocale = getLocaleFromStorage({    // Acceso a cookies en SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Acceso a headers en SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Recurso a la negociación "Accept-Language" del navegador  const negotiatorHeaders: Record<string, string> = {};  // Convertir el objeto Headers de SvelteKit a un Record<string, string> plano  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Comprobar la locale a partir del header `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Devolver la locale por defecto si no se encuentra ninguna coincidencia  return defaultLocale;};
      getLocaleFromStorage verificará la localidad desde el encabezado o la cookie dependiendo de tu configuración. Consulta Configuración para más detalles.
      La función localeDetector procesará el encabezado Accept-Language y devolverá la mejor coincidencia.

      Si la localidad no está configurada, queremos devolver un error 404. Para facilitarlo, podemos crear una función match para verificar si la localidad es válida:

      /src/params/locale.ts
      export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

      Nota: Asegúrate de que tu src/app.d.ts incluya la definición de la localidad:

      typescript
      declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

      Para el archivo +layout.svelte, podemos eliminar todo, para mantener solo contenido estático, no relacionado con i18n:

      src/+layout.svelte
      <script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

      Luego, crea una nueva página y layout bajo el grupo [[locale=locale]]:

      src/routes/[[locale=locale]]/+layout.ts
      import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Usa el tipo genérico Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};
      src/routes/[[locale=locale]]/+layout.svelte
      <script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicializar Intlayer con la locale de la ruta  $effect(() => {      setupIntlayer(data.locale);  });    // Usar el diccionario de contenido del layout    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>
      src/routes/[[locale=locale]]/+page.ts
      export const prerender = true;
      src/routes/[[locale=locale]]/+page.svelte
      <script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Usar el diccionario de contenido de la página principal    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

    8. Enlaces internacionalizados

      Opcional

      Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, /en/about, /fr/about). Este componente automáticamente prefija cualquier enlace con la locale actual.

      src/lib/components/LocalizedLink.svelte
      <script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Ayudante para prefijar la URL con la locale actual  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

      Si usas goto de SvelteKit, puedes usar la misma lógica con getLocalizedUrl para navegar a la URL localizada:

      typescript
      import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale

    9. Selector de idioma

      Opcional

      Para permitir a los usuarios cambiar de idioma, actualiza la URL.

      src/lib/components/LanguageSwitcher.svelte
      <script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Establecerá la locale en el store y activará onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

    10. Añadir proxy backend

      Opcional

      Para añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función intlayerProxy proporcionada por el plugin vite-intlayer. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.

      vite.config.ts
      import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

    11. Configurar el editor / CMS de intlayer

      Opcional

      Para configurar el editor de intlayer, debes seguir la documentación del editor de intlayer.

      Para configurar el CMS de intlayer, debes seguir la documentación del CMS de intlayer.

      Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis de componente en tu contenido intlayer.

      Component.svelte
      <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderizar contenido como contenido simple -->  <h1>{$content.title}</h1>  <!-- Renderizar contenido como un componente (requerido por el editor) -->  {@const Component = $content.component}<Component /></div>

    12. Extraer el contenido de tus componentes

      Opcional

      Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.

      Para facilitar este proceso, Intlayer propone un compilador / extractor para transformar tus componentes y extraer el contenido.

      Para configurarlo, puedes agregar una sección compiler en tu archivo intlayer.config.ts :

      intlayer.config.ts
      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
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      Ejecuta el extractor para transformar tus componentes y extraer el contenido

      bash
      npx intlayer extract

    Configuración de Git

    Se recomienda ignorar los archivos generados por Intlayer.

    .gitignore
    # Ignorar los archivos generados por Intlayer.intlayer

    Ir Más Allá

    Vite y Svelte
    Vite y Preact