Traducir una web hecha con Bolt o v0 sin reescribir el código

Le pediste la web a Bolt o a v0, salió en una tarde y está publicada. Ahora quieres venderla en Francia y Alemania, abres el proyecto y te encuentras con lo que realmente te ha generado: un montón de componentes con el texto escrito a pelo dentro del JSX. No hay un botón de «añadir idioma» en ningún sitio.

Hay dos formas de traducir una web de Bolt o v0: meter internacionalización en el código —rutas por idioma, diccionarios de textos y una librería de i18n— o poner por encima una capa de traducción que sirva cada idioma en su propia URL sin tocar el proyecto. La primera es la correcta si lo que has construido es una aplicación con mucha interfaz propia; la segunda se activa con una línea en el <head> y genera sola las URLs por idioma, el hreflang y el sitemap. Con Lantis esa segunda vía cuesta desde $3,50 al mes por idioma y funciona con el código tal y como está.

Resumen rápido

• Ni Bolt ni v0 tienen multiidioma documentado. Generan código moderno y lo publican, pero las versiones por idioma, el hreflang y el sitemap por idioma los pones tú.
• Internacionalizar una app de Next.js con App Router no es una casilla: hay que mover todo app/ bajo un segmento app/[lang], detectar el idioma en el proxy y mantener un diccionario JSON por idioma, según la guía de internacionalización de Next.js.
• Averigua antes dónde se renderiza tu web. Vite + React pinta el texto en el navegador; Next.js con App Router lo manda ya en el HTML. Cambia lo que ve Google.
• Pedirle al chat «traduce la web al inglés» es la peor opción: te sobrescribe los textos originales o te duplica pantallas que dejan de parecerse entre sí.
• Sin URL propia por idioma no hay SEO internacional, por bonita que quede la traducción en pantalla.
• Con Lantis pegas una línea en el <head> de tu layout o de tu index.html y cada idioma pasa a tener su URL, su hreflang y su sitemap, en más de 60 idiomas.

Qué traen Bolt y v0 de serie (y qué no)

Ninguno de los dos trae internacionalización. La documentación de v0 describe que genera «código real y apps full-stack» con «herramientas modernas como Next.js, Tailwind y shadcn/ui», pero no habla de versiones por idioma: lo único relacionado con idiomas es que puedes describirle tu idea en el idioma que quieras. La documentación de Bolt cubre publicar el proyecto y conectar un dominio propio, y tampoco menciona el multiidioma.

Eso es normal: no son plataformas de contenido, son generadores de código. La diferencia con Framer o Webflow es justo esa: aquí tienes acceso al código, así que tienes las dos vías disponibles, y conviene elegir con criterio en vez de por lo primero que te sugiera el chat.

Lo que sí heredas es el stack. v0 trabaja sobre Next.js; Bolt, según lo que le pidas, suele sacar un proyecto de Vite con React, y también puede generar Next.js. Apúntalo, porque de ahí depende todo lo demás.

Las dos vías, cara a cara

Cuándo elegir i18n en el código en vez de Lantis: si lo que has generado es una aplicación con sesión y paneles, quieres los textos versionados en el repositorio y necesitas que un traductor trabaje sobre ficheros JSON, i18n es la opción correcta. También si cada idioma va a tener contenido distinto —otros precios, otra oferta—, porque eso no es traducir, es montar otra web.

Opción 1: internacionalizar el código generado

Internacionalizar una app de Next.js con App Router es un trabajo de refactor, no una opción de configuración. La propia guía de Next.js lo describe en tres piezas:

1. Enrutado por idioma. Todos los ficheros especiales de app/ quedan anidados bajo app/[lang], incluido el layout raíz, para que el router reciba el idioma como parámetro.
2. Detección del idioma. Se lee la cabecera Accept-Language en el proxy (el antiguo middleware), se compara con tu lista de idiomas y se redirige a la ruta con prefijo.
3. Diccionarios. Un JSON por idioma con una clave por texto, y cada componente pasa a leer dict.algo.algo en vez de tener la frase escrita.

El paso 3 es el que de verdad duele con código generado por IA, porque el texto está repartido en decenas de componentes y hay que sacarlo uno a uno. Y cuando termines, el mantenimiento no acaba: cada frase nueva es una entrada nueva en cada diccionario, y si olvidas una, el visitante francés ve español. Si tu proyecto es Vite + React el trabajo es equivalente con react-i18next, más montar tú el enrutado por idioma, que Vite no te da.

Es un camino válido. Solo no es «añadir idiomas»: es desarrollo, y luego una tarea permanente.

Opción 2: una capa de traducción por encima

Una capa de traducción se pone delante de tu web publicada: tú mantienes un solo proyecto y un solo idioma en el código, y el servicio sirve la versión traducida en /fr/ o /de/. No duplica páginas ni te obliga a extraer una sola cadena de texto.

Es lo que hace Lantis. En la práctica:

• Más de 60 idiomas, con el motor de IA a elegir: Gemini por defecto, o Claude, DeepL o DeepSeek.
• URL propia por idioma, hreflang, sitemap por idioma, canonical y title, meta description y Open Graph traducidos por URL.
• El HTML llega ya traducido desde el servidor, sin JavaScript de traducción en el navegador.
• Editor visual para corregir cualquier frase haciendo clic sobre la web traducida, glosario de marca, y tus correcciones bloqueadas para que la IA no las sobrescriba.
• Exclusiones por URL o por selector CSS: un bloque de código, un nombre propio o una ruta entera se quedan en el idioma original.

Cómo funciona por dentro está en qué es un proxy de traducción, y dónde va el script en cada stack —HTML, React, Next.js, Vue, Astro— en cómo añadir idiomas a cualquier web. No somos neutrales: hacemos Lantis.

Paso a paso: tu web de Bolt o v0 en varios idiomas

1. Averigua qué te han generado. Si hay una carpeta app/ con layout.tsx, es Next.js con App Router. Si hay un index.html en la raíz y un vite.config.ts, es Vite + React. Lo necesitas para el paso 4.
2. Publica en tu dominio propio. Mientras la web viva en el subdominio del generador, no tienes estructura de URLs que trabajar y el posicionamiento que ganes no es tuyo.
3. Limpia los textos originales. El código generado por IA trae microcopy en inglés dentro de webs en español y tres textos distintos para el mismo botón. Lo que esté ambiguo en el original saldrá ambiguo en seis idiomas.
4. Pega el código en el <head>. En Next.js con App Router, en app/layout.tsx:

import Script from 'next/script';

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

En un proyecto Vite, dentro del <head> del index.html de la raíz, nunca dentro de un componente: ahí se reinyectaría en cada navegación. Puedes pedirle al propio chat de Bolt o de v0 que lo inserte, y luego comprobarlo en el diff.

1. Elige los idiomas con datos, no con ilusión. Dos bastan para medir si el canal funciona; el criterio está en qué idiomas añadir a tu web.
2. Despliega y abre tudominio.com/fr/. Comprueba tres cosas: que el texto sale en francés, que en el código fuente aparecen las etiquetas hreflang, y que el menú, los formularios y el pie también están traducidos. Si no tienes claro qué debería aparecer, hreflang explicado fácil lo resume.
3. Manda el sitemap de cada idioma a Search Console y pasa la Inspección de URLs por una página traducida de cada idioma. Google suele tardar entre una y cuatro semanas en empezar a rastrear las URLs nuevas.

Puedes comprobar cómo está cualquier web (la tuya o la de un competidor) con el comprobador de SEO multilingüe, y calcular el coste de tu caso en la calculadora de traducción web.

El detalle técnico que decide: dónde se renderiza tu web

Si tu proyecto es Vite + React, el texto de tu web no viaja en el HTML: lo pinta el navegador. Eso no es un problema que cree la traducción, es un problema que ya tienes en tu idioma original.

Con una capa de traducción, lo que llega ya traducido en el HTML son los metadatos y el contenido que sirva tu origen; lo que la app pinte después en el navegador se traduce en el navegador. Si lo que te han generado es Next.js renderizando en servidor, el texto viaja en el HTML y se traduce antes de salir, que es el escenario bueno. En los dos casos, la conclusión práctica es la misma: no des por buena la indexación hasta verla en la Inspección de URLs de Search Console, en un par de idiomas.

Hay otro detalle que casi nadie mira: en una web generada por IA el hero viene de tus componentes, los mensajes de validación de la librería de formularios y algún bloque de una API. Un diccionario i18n solo cubre lo que tú metas en él.

Errores frecuentes

• Pedirle al chat «traduce la web al francés». Te sobrescribe los textos originales o te crea pantallas duplicadas. Tu idioma original tiene que seguir siendo la única fuente.
• Montar app/[lang] a medias. Si mueves las páginas pero no el layout raíz, acabas con rutas que compilan y páginas que no.
• Pegar el script dentro de un componente React. Se vuelve a inyectar en cada navegación y se carga varias veces. Va en el <head>.
• Dejar los metadatos en el idioma original. Si el title y la meta description siguen en español, pierdes el clic en el buscador aunque la página esté traducida entera.
• Traducir y no indexar. Si todos los idiomas comparten la misma dirección, Google indexa uno. Por qué la URL es lo que manda está en ¿puedo tener una URL personalizada por idioma?.

En una web hecha con Bolt o v0 la traducción no es el trabajo difícil: el trabajo difícil es que cada idioma tenga una URL propia que Google pueda indexar por separado.

Preguntas frecuentes

¿Tienen Bolt o v0 una opción nativa para webs multilingües?

No. La documentación de v0 describe que genera código con Next.js, Tailwind y shadcn/ui, y la de Bolt cubre publicar el proyecto y conectar un dominio; ninguna de las dos documenta versiones por idioma, hreflang ni sitemap por idioma. El multiidioma lo añades tú, programándolo en el proyecto o poniendo una capa de traducción por encima.

¿Puedo usar next-intl o react-i18next en una web generada por IA?

Sí, el código es tuyo y es un proyecto estándar. El trabajo real no es instalar la librería, es extraer cada texto de los componentes a un diccionario y montar el enrutado por idioma. Con App Router eso implica anidar todo app/ bajo app/[lang] y detectar el idioma en el proxy, tal como documenta Next.js.

¿Se traducen los textos que vienen de una API o de una base de datos?

Con una capa de traducción, sí: se traduce lo que aparece en la página, venga de donde venga. Con una librería de i18n, no: el diccionario solo cubre las claves que escribas, así que el contenido dinámico se queda en el idioma original salvo que lo traduzcas en el origen. Lo que nunca se traduce son los datos privados que introduce cada usuario.

¿Puedo combinar las dos vías?

Sí. Si ya tienes la interfaz gestionada con i18n y lo que te falta es el contenido —marketing, blog, textos que llegan de una API—, una capa de traducción cubre esa parte sin que toques el enrutado. Lo que no debes hacer es tener las dos sirviendo las mismas rutas, porque acabarás con dos versiones peleándose por /fr/.

¿Cuánto cuesta tener mi web de Bolt o v0 en tres idiomas?

Con Lantis, tres idiomas son $3 al mes por idioma —$9 al mes en total—, con 500.000 palabras incluidas por cada idioma. Hay un plan gratis de 100 traducciones sin tarjeta para probarlo antes de pagar, y el precio baja a $2,50 por idioma a partir de diez idiomas.

¿Va más lenta la web al añadir idiomas?

No debería. En Lantis más del 70 % de las traducciones se sirven desde caché edge, con menos de 50 ms de latencia cuando hay acierto; la primera visita a una página sin traducir tarda unos 800 ms y a partir de ahí queda guardada.

Conclusión

Bolt y v0 te dan algo que Framer o Webflow no te dan: el código. Puedes internacionalizar a mano, con rutas por idioma y diccionarios, y controlar cada cadena de texto. También significa que el trabajo es tuyo, incluido mantenerlo cada vez que cambies una frase. Si lo que has construido es una aplicación, merece la pena. Si es una web que quieres que te traiga clientes de otros países, refactorizar el proyecto es gastar semanas en algo que no mejora tu posicionamiento ni un puesto. El mismo camino, con el otro generador con IA que más se usa, está en cómo traducir una web hecha con Lovable.

Lantis añade idiomas a tu web de Bolt o v0 con una línea de código en el <head>, sin reescribir el proyecto, y funciona igual en Framer, Webflow, Shopify, WordPress, Wix, Squarespace o cualquier HTML: más de 60 idiomas con su URL propia, HTML servido ya traducido desde el servidor, hreflang, canonical, sitemap por idioma y metadatos traducidos, con motor de IA a elegir, glosario de marca, editor visual y pre-traducción nocturna. Cuesta $3,50 al mes con un idioma, $3 por idioma de 2 a 9 y $2,50 desde 10, con 500.000 palabras incluidas por idioma. Empieza gratis y mira tu web en francés antes de tocar una línea de código.