Deploy de Next.js con el MCP de Vercel

Llevar un proyecto web a producción es el paso definitivo para que tu trabajo sea visible en internet. Cuando ya tienes el backend resuelto con Supabase y el frontend construido con Next.js, solo falta publicar esa interfaz en un servicio confiable. Aquí es donde Vercel se convierte en la opción más natural, especialmente si trabajas con Next.js, y aún más si puedes automatizar el proceso desde tu propio editor gracias a un MCP oficial.

¿Cómo preparar tu cuenta de Vercel para el despliegue?

Antes de cualquier configuración técnica, necesitas una cuenta activa en vercel.com. Una vez registrado, accedes a tu panel de proyectos donde puedes ver todos los sitios que ya tienes desplegados. Desde ahí puedes agregar un nuevo proyecto de dos formas principales:

• Importar desde GitHub: conectas tu cuenta de GitHub y seleccionas el repositorio. Cada git push posterior generará un despliegue automático [00:42].
• Usar el MCP de Vercel desde Windsurf: esta es la ruta que permite hacer todo sin salir del editor, interactuando directamente con el agente de inteligencia artificial [01:12].

El MCP (Model Context Protocol) de Vercel es un conector oficial disponible en el marketplace de Windsurf. Al instalarlo, el editor te redirige a una pantalla de validación de sesión donde autorizas los permisos necesarios para tu cuenta [01:22].

¿Qué herramientas ofrece el MCP de Vercel?

Una vez instalado, puedes verificar las acciones disponibles desplegando el menú de herramientas. El MCP incluye funcionalidades como:

• Buscar documentación de Vercel.
• Desplegar a Vercel directamente desde el editor.
• Listar proyectos y deployments existentes.
• Obtener información de proyectos específicos [01:42].

Estas herramientas permiten que el agente de Cascade (el asistente de Windsurf) ejecute cada paso del despliegue como si lo hicieras manualmente desde la terminal o el panel web.

¿Qué sucede durante el proceso de deploy con el agente?

Al pedirle a Cascade que despliegue el proyecto, el agente primero valida la estructura de archivos. Luego utiliza la herramienta list teams para identificar tu equipo en Vercel y procede a ejecutar el deploy [02:12].

Si no tienes la CLI de Vercel instalada, el agente lo detecta y recomienda ejecutar npm install -g vercel para instalarla globalmente. Después lanza el comando vercel deploy directamente desde la terminal integrada en el chat [02:32].

¿Cómo resolver errores de estructura en proyectos monorepo?

No todos los proyectos tienen una estructura estándar de Next.js. En este caso, el proyecto utiliza PNPM con una estructura de monorepo: la carpeta raíz contiene AI Tools, dentro está Platzi FC, y en el directorio apps/web se encuentra el proyecto de Next.js real [03:02].

Cuando el primer build falla, puedes escribir directamente en la terminal del agente para guiarlo. Cascade analiza los errores y ajusta la configuración para que el despliegue termine de forma exitosa [03:22].

¿Por qué es crítico configurar las variables de entorno?

Las variables de entorno guardan las keys de conexión con servicios externos como Supabase. Sin ellas, el frontend no puede leer datos del backend. El agente recomienda comandos específicos del set de herramientas de Vercel para pasar esas variables al proyecto [03:42].

Vercel ofrece múltiples entornos: desarrollo, staging y producción. Es necesario agregar las variables en cada uno para que la conexión funcione correctamente [04:22]. Tras configurarlas, hay que redesplegar el proyecto porque las variables se leen en el momento de build [04:42].

¿Cómo verificar que tu proyecto está en producción?

Desde el panel de Vercel puedes confirmar que el despliegue fue exitoso. El proyecto muestra la rama main desplegada y genera una URL pública que puedes compartir con cualquier persona [05:02].

Para validar la conexión con Supabase, basta con modificar un dato en la base de datos y refrescar la página. Si el cambio se refleja, significa que el frontend en Vercel está leyendo correctamente la data desde Supabase en tiempo real [05:22].

De esta forma, utilizando herramientas de inteligencia artificial en cada fase —desde la planificación hasta el despliegue— es posible construir un MVP completo y funcional. Comparte el enlace de tu proyecto en los comentarios para que la comunidad pueda verlo.