Desarrollo7 min de lectura

Cómo añadir idiomas a cualquier web: HTML, React, Next.js, Vue y más

Lantis funciona en cualquier web con acceso al <head>. Guía de instalación para HTML estático, React, Next.js, Vue, Nuxt, Astro y cualquier framework o CMS a medida.

Equipo Lantis26 de junio de 2026

Si has desarrollado tu web a medida —con HTML puro, React, Next.js, Vue, Nuxt, Astro, Django, Rails o cualquier otro stack— la forma habitual de añadir multilingüe es implementar una librería de i18n: next-i18next, react-intl, vue-i18n o similar. Esto implica refactorizar el código, extraer todas las cadenas de texto a archivos de traducción, gestionar las rutas y mantener los archivos de traducción actualizados cada vez que cambias el contenido.

Lantis ofrece una alternativa que no requiere refactorizar nada: un snippet que se añade al <head> de cualquier web y que traduce el contenido automáticamente con IA, genera URLs por idioma y gestiona todo el SEO técnico multilingüe.

Resumen rápido

Lantis funciona en cualquier web con acceso al <head>: HTML, React, Vue, Next.js, Nuxt, Astro, Django, Rails, Laravel, etc.
No hay que refactorizar el código ni extraer cadenas de texto.
Las URLs por idioma (/fr/, /de/) se generan automáticamente.
El hreflang y el sitemap se generan sin configuración adicional.
Compatible con SPAs, SSR, SSG y HTML estático.

Cuándo tiene sentido usar Lantis vs. una librería de i18n

Las librerías de i18n como next-i18next o vue-i18n son la mejor opción cuando:

El equipo de desarrollo tiene tiempo para la refactorización
El contenido de la web cambia poco (es mayormente estático)
Necesitas control muy fino sobre cada cadena de texto traducida

Lantis es la mejor opción cuando:

Quieres añadir idiomas sin tocar el código existente
El contenido de la web es dinámico y cambia frecuentemente
No tienes recursos de desarrollo disponibles para la refactorización
Quieres que las traducciones se actualicen automáticamente cuando cambia el contenido

Ambas opciones pueden coexistir: si ya tienes algunas cadenas gestionadas con i18n y quieres cubrir el resto (por ejemplo, contenido de un CMS), Lantis puede gestionar la parte dinámica.

HTML estático

Si tu web es HTML puro —sin framework ni CMS— la instalación es la más sencilla posible: añade el snippet de Lantis en el <head> de cada página.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi web</title>
  <!-- Snippet de Lantis -->
  <script src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async>
  </script>
</head>
<body>
  <!-- Tu contenido -->
</body>
</html>

Si tienes un layout compartido (header/footer en un archivo que se incluye en todas las páginas), añade el snippet ahí una sola vez. Si cada página es un archivo HTML independiente, añádelo en el <head> de cada una.

React (Create React App / Vite)

En una aplicación React con Create React App o Vite, el punto de entrada del HTML es el archivo public/index.html (CRA) o index.html en la raíz (Vite).

Create React App — edita public/index.html:

<head>
  <meta charset="utf-8" />
  <title>Mi App</title>
  <script src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async>
  </script>
</head>

Vite — edita index.html en la raíz del proyecto:

<head>
  <meta charset="UTF-8" />
  <title>Mi App</title>
  <script src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async>
  </script>
</head>

Next.js (App Router y Pages Router)

En Next.js, el snippet se añade en el layout raíz.

App Router — edita app/layout.tsx:

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <head>
        <Script
          src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router — edita pages/_document.tsx:

import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="es">
      <Head>
        <script
          src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Vue 3 / Nuxt 3

Vue 3 (Vite) — añade el snippet en index.html:

<head>
  <meta charset="UTF-8" />
  <title>Mi App</title>
  <script src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async>
  </script>
</head>

Nuxt 3 — usa useHead en app.vue o en nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://cdn.get-lantis.com/lantis.js',
          'data-site-id': 'TU_SITE_ID',
          'data-langs': 'en,fr,de',
          async: true,
        },
      ],
    },
  },
});

Astro

En Astro, edita el layout base (normalmente src/layouts/Layout.astro):

---
// Layout.astro
---
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title><slot name="title" /></title>
  <script
    src="https://cdn.get-lantis.com/lantis.js"
    data-site-id="TU_SITE_ID"
    data-langs="en,fr,de"
    is:inline
  ></script>
</head>
<body>
  <slot />
</body>
</html>

El atributo is:inline en Astro es necesario para que el script se renderice tal cual en el HTML sin que Astro lo procese.

Django, Rails, Laravel y otros backends

Para aplicaciones con backend propio, el snippet va en el template base que se extiende en todas las páginas.

Django — en base.html:

{% block head %}
<script src="https://cdn.get-lantis.com/lantis.js"
        data-site-id="TU_SITE_ID"
        data-langs="en,fr,de"
        async>
</script>
{% endblock %}

Rails — en application.html.erb:

<head>
  <%= javascript_include_tag 'https://cdn.get-lantis.com/lantis.js',
      'data-site-id' => 'TU_SITE_ID',
      'data-langs' => 'en,fr,de',
      async: true %>
</head>

Laravel — en resources/views/layouts/app.blade.php:

<head>
  <script src="https://cdn.get-lantis.com/lantis.js"
          data-site-id="TU_SITE_ID"
          data-langs="en,fr,de"
          async>
  </script>
</head>

Consideraciones para SPAs (Single Page Applications)

Las SPAs (React, Vue, Angular) tienen una particularidad: el contenido se renderiza dinámicamente en el cliente. Lantis detecta los cambios del DOM y traduce el contenido dinámico automáticamente, por lo que funciona correctamente con SPAs sin configuración adicional.

Sin embargo, para el SEO es importante que las rutas por idioma sean accesibles también desde el servidor. Si tu SPA no tiene SSR (server-side rendering), considera usar un framework con SSR como Next.js o Nuxt para que Google pueda rastrear las versiones de idioma correctamente.

Para el SEO multilingüe, la diferencia entre una SPA sin SSR y una web con SSR puede ser significativa. Google puede procesar JavaScript, pero el rastreo de SPAs puras es menos eficiente. Con Next.js o Nuxt en modo SSR o SSG, los crawlers ven el HTML ya renderizado con el idioma correcto.

Preguntas frecuentes

¿Lantis es compatible con TypeScript?

Sí. El snippet de Lantis es JavaScript puro que se carga de forma asíncrona. TypeScript no afecta a la instalación.

¿Funciona con webs que cargan contenido dinámicamente (AJAX, fetch)?

Sí. Lantis monitoriza el DOM y traduce el contenido nuevo que aparece dinámicamente, incluyendo el cargado via AJAX o fetch.

¿Hay algún límite de páginas o rutas?

No. Lantis traduce todas las páginas de tu web sin límite de rutas.

¿Puedo usar Lantis junto con mi librería de i18n existente?

Sí. Puedes usar Lantis para el contenido dinámico que no está cubierto por tu librería de i18n (por ejemplo, contenido de un CMS o textos de una API). Los textos ya traducidos por tu librería de i18n no se sobreescriben.

Conclusión

Añadir multilingüe a una web a medida sin refactorizar el código es perfectamente posible con Lantis. Independientemente del stack —HTML puro, React, Next.js, Vue, Nuxt, Astro o cualquier backend con plantillas— el proceso es siempre el mismo: añadir el snippet al <head> y activar los idiomas desde el panel.

El resultado: traducciones automáticas con IA, URLs reales por idioma, hreflang correcto y un SEO multilingüe que funciona desde el primer día, sin tocar el código existente.

Empieza gratis en Lantis y añade idiomas a tu web hoy.

Pon tu web en varios idiomas hoy.

Una línea de código. SEO real por idioma. Traducción con IA. Sin tarjeta para empezar.

Empezar gratis