Vercel: importar en un minuto
Lección 13 de 26 del curso «Vibe coding». Gratis, con animaciones y un test.
Vercel y Next.js
Vercel es un hosting que los desarrolladores frontend aman especialmente. La misma empresa hace Next.js, un framework popular, o sea un esqueleto listo para sitios en JavaScript. Muchos constructores con IA y agentes crean proyectos en Next.js por defecto. Ejemplo: armaste en un constructor tu portafolio para entrar a diseño y pasaste el código a GitHub. Vercel entiende un proyecto así al toque.
Importar desde GitHub en tres pasos
El camino del esquema va de izquierda a derecha. Importar: entras con GitHub y eliges el repositorio del portafolio. Configuración detectada: Vercel descubre solo el framework, el comando de build y la carpeta de salida; casi nunca hay que tocar nada. Deploy: lo lanzas y corre el build. Al final recibes un enlace al sitio que ya puedes pasar a tus amigos. Tu propio nombre de sitio lo conectas después, en la lección de dominios.
Vista previa para cada Pull Request
Lo demás es como en la lección de deploy: un push a main actualiza el sitio en vivo. Y cada Pull Request recibe su enlace de vista previa, el chip del esquema. Ejemplo: un agente rehízo en una rama la página de trabajos. Abres la vista previa en el celular y la revisas. En Vercel puedes dejar un comentario encima de la página de vista previa: «esta imagen está cortada». ¿Todo corregido? Haces merge.
Variables de entorno
Las variables de entorno (env vars) son ajustes y claves que el hosting le pasa a tu código al ejecutarlo, en vez de guardarlas en el repositorio. En Vercel se definen por separado para tres entornos, el panel del esquema. Production: el sitio en vivo. Preview: los enlaces de vista previa. Development: correrlo en tu compu. Ejemplo: en Preview una clave de pago de prueba, en Production la real. ¿Cambiaste una variable? Haz un deploy nuevo.
Volver atrás en un clic
Cada deploy queda en una lista, la fila de abajo del esquema. Ejemplo: hiciste merge y del sitio en vivo desaparecieron todos tus trabajos. No le pidas a la IA arreglarlo a las apuradas directo en main. Pulsas Rollback en el último deploy que funcionaba y vuelve a ser el sitio en vivo casi al instante, sin build nuevo. Luego buscas el error con calma en una rama. En resumen: primero volver atrás, después arreglar.
¿Vercel o Cloudflare?
Para un primer sitio sirven los dos: conectas GitHub y obtienes build, vistas previas y sitio en vivo, como en el esquema. Vercel es la opción por defecto para proyectos en Next.js, que los constructores suelen generar. Cloudflare es más fuerte en DNS, protección y Workers. ¿No estás seguro? Elige donde tu proyecto hizo build sin problemas. Suele haber plan gratis; los límites, míralos en su sitio. Revisa si el servicio está disponible en tu país. Practica en el simulador de Vercel.
Ponte a prueba
- ¿Qué hace Vercel justo después de importar un repositorio?
Respuesta correcta: Detecta sola el framework y la configuración de build. Vercel reconoce el framework, el comando de build y la carpeta de salida. El dominio se conecta aparte, cuando quieras. - Una versión nueva rompió el sitio en vivo. ¿Qué haces primero?
Respuesta correcta: Volver al último deploy que funcionaba. El rollback devuelve la versión que funciona casi al instante, sin build nuevo. Arreglas con calma después, en una rama. - ¿Por qué definir env vars distintas para Production y Preview?
Respuesta correcta: Para que las vistas previas no toquen las claves reales. En Preview puedes tener claves de prueba y las reales solo en Production. Así probar en una rama no toca dinero ni datos reales.