Del prompt a producción: cómo desplegar una app Next.js generada con IA

El enlace de vista previa es donde la mayoría de las apps construidas con IA van a morir. La app funciona, compartes la URL de preview con dos amigos, y tres semanas después el proyecto está abandonado — porque una vista previa nunca fue el producto. Producción sí lo es: tu propia URL, usuarios reales e infraestructura que no depende de que mantengas una pestaña del navegador abierta.

La buena noticia: si tu builder generó un proyecto Next.js estándar, el camino a producción es corto y está bien pavimentado. Este recorrido usa el flujo de Massvai, pero la forma aplica a cualquier builder que te entregue código real.

Antes de desplegar: una auditoría de 10 minutos

Resiste el impulso de desplegar en cuanto la vista previa se vea bien. Verifica cuatro cosas primero:

1. Haz clic en cada ruta que recorrería un desconocido. No el camino feliz que ya probaste treinta veces — los raros. Envía formularios vacíos. Visita una página de detalle de algo que no existe. Si la app tiene autenticación, prueba una página sin haber iniciado sesión. Cuéntale al agente cualquier cosa que se rompa; arreglarlo antes del lanzamiento cuesta una iteración, arreglarlo después cuesta usuarios.

2. Inventaría tus secretos. Lista cada servicio externo con el que habla la app — base de datos, proveedor de autenticación, procesador de pagos, correo. Cada uno tiene claves, y esas claves deben vivir en variables de entorno, nunca en el código. Massvai gestiona las variables de entorno del proyecto explícitamente y las inyecta en los despliegues; uses la plataforma que uses, confirma que el código generado lee de process.env en lugar de tener los valores incrustados.

3. Separa los datos de prueba de los datos reales. Si construiste contra una base de datos de prueba o claves de prueba de Stripe, producción necesita sus propios valores. Este es el bug más común del día de lanzamiento: la app funciona perfectamente contra credenciales de prueba que no deben servir a usuarios reales.

4. Crea un checkpoint. Guarda una instantánea de la versión exacta que vas a lanzar. Cuando sigas iterando la próxima semana, querrás un estado conocido como bueno para comparar — o al que hacer rollback.

Paso 1: Lleva el código a tu propio GitHub

Aunque tu builder pueda desplegar directamente, sincroniza primero el repositorio a tu propia cuenta de GitHub. Esto importa por tres razones: es tu respaldo, es tu ruta de traspaso cuando se sume un desarrollador, y es lo que conecta con el pipeline de despliegue basado en git de Vercel — cada push futuro despliega automáticamente.

En Massvai esto es un flujo integrado: conecta tu cuenta de GitHub, elige un nombre de repositorio, haz push. Verifica el resultado abriendo el repo y comprobando que ves un proyecto Next.js normal — directorio app/, package.json, archivos TypeScript. Ese es tu activo.

Paso 2: Despliega en Vercel

Vercel es la respuesta por defecto para hospedar Next.js por una razón práctica y aburrida: soporte sin configuración para cada funcionalidad de Next.js (server components, rutas de API, optimización de imágenes), un CDN global y HTTPS automático. El plan gratuito Hobby corre cómodamente apps pequeñas en producción.

El flujo guiado de Massvai conecta tu cuenta de Vercel, crea el proyecto, traslada tus variables de entorno y dispara el build. Hacerlo a mano apenas es más difícil: importa el repositorio de GitHub en el dashboard de Vercel, pega tus variables de entorno y haz clic en desplegar.

De cualquier forma, el primer build es el momento de la verdad. Un proyecto generado que compila limpio en la vista previa casi siempre compila limpio en Vercel — pero si falla, lee el log: el error suele ser una variable de entorno que falta, y el log te dirá cuál.

Paso 3: Conecta un dominio propio

tu-app.vercel.app funciona, pero un dominio real cambia cómo la gente trata el producto — y es la parte en la que los no desarrolladores se atascan más a menudo, así que aquí va completa:

1. Compra el dominio en cualquier registrador (aproximadamente 10–15 dólares al año por un .com).
2. Añádelo a tu proyecto (en la configuración de dominios de Massvai o en el dashboard de Vercel).
3. La plataforma te muestra uno o dos registros DNS para añadir — normalmente un registro A o un CNAME. Pégalos en el panel DNS de tu registrador.
4. Espera la propagación — de minutos a unas horas. Los certificados HTTPS se emiten automáticamente cuando los registros resuelven.

Eso es todo. En ningún momento hay administración de servidores.

Paso 4: La primera semana en producción

El lanzamiento es una línea de salida. Tres hábitos para la primera semana:

• Observa el comportamiento real. Añade una herramienta de analítica ligera y mira a dónde va la gente en realidad — nunca es a donde esperabas. Esto se convierte en tu roadmap de iteración.
• Sigue lanzando en pequeño. Con GitHub conectado a Vercel, cada cambio sincronizado se despliega automáticamente. La brecha entre "un usuario lo reportó" y "está arreglado en producción" puede ser de menos de una hora, y esa velocidad es tu mayor ventaja frente a competidores establecidos.
• Haz rollback sin vergüenza. ¿Un despliegue salió mal? Vercel mantiene cada despliegue anterior a un clic de distancia, y los checkpoints de tu builder te dan la misma red de seguridad a nivel de código. El costo de un error son minutos, así que arriésgate.

La parte que de verdad importa

Ninguno de estos pasos requiere ya habilidades de ingeniería — ese es el cambio que trajeron los AI app builders. Lo que no pueden hacer es poner la app frente a la gente por ti. La app en tu pestaña de vista previa vale exactamente nada hasta que alguien más la usa. Despliégala esta semana.