Hasta ahora has construido algo real. Tienes una base de datos en Supabase con fotos, carpetas, reglas de acceso y códigos por familia. Si abres el proyecto en tu ordenador, funciona.
Pero hay un problema.
Tu ordenador no está encendido las 24 horas. No tiene una dirección pública en internet. Y cuando lo apagas, la app desaparece. Tus invitados no pueden entrar desde su móvil porque tu app no está en ningún sitio al que ellos puedan llegar.
Para eso existe Vercel.
Qué es Vercel
Vercel es una plataforma que coge tu código, lo instala en sus servidores y lo pone disponible en internet con una URL pública. Tú no gestionas ningún servidor. No pagas por horas de máquina. No tienes que hacer configuraciones complicadas.
Le das tu código. Vercel hace el resto.
El plan gratuito de Vercel es más que suficiente para proyectos personales como MiraMiEvento. No necesitas tarjeta de crédito para empezar.
La pieza que faltaba
Recuerda el mapa que hemos ido construyendo a lo largo del curso:
- Supabase guarda los datos, las fotos y los códigos de acceso
- Tu código, hecho con Next.js, sabe cómo mostrarlos
- Vercel pone ese código en internet para que cualquiera pueda usarlo
Sin Vercel, tienes los ingredientes, pero no tienes restaurante. Vercel es el restaurante.
Cómo funciona el despliegue
Todo lo técnico que se menciona en este módulo — crear el repositorio, conectar con Vercel, configurar las variables de entorno, hacer el deploy — lo hace un agente de código como Claude Code, Codex u otro similar. Tú describes lo que necesitas; el agente escribe el código y ejecuta los pasos. No necesitas tocar la terminal ni entender cada comando.
El proceso tiene tres pasos. Los verás en detalle a continuación, pero antes conviene entender qué está pasando realmente.
Cuando subes tu código a GitHub, Vercel lo detecta automáticamente. Lo descarga, ejecuta el proceso de construcción, lo que en Next.js se llama build, y publica el resultado. Esto suele ocurrir en menos de dos minutos.
Y cada vez que actualizas el código, Vercel repite el proceso solo, sin que tengas que hacer nada más.
Paso 1 — Subir el código a GitHub
Vercel necesita que tu código esté en GitHub para poder leerlo. Si ya tienes el repositorio de MiraMiEvento en GitHub, puedes pasar al paso siguiente. Si no, este es el momento de crearlo.
En GitHub, crea un repositorio nuevo. Dale un nombre como miramievento.
Si nunca has usado Git, no te preocupes. En el siguiente módulo lo veremos con más calma. Por ahora, quédate con la idea de que subir el código a GitHub es como guardar el proyecto en la nube para que Vercel pueda encontrarlo.
Desde tu ordenador, sube el código con:
git init
git add .
git commit -m "primera versión"
git remote add origin https://github.com/tu-usuario/miramievento.git
git push -u origin mainCambia tu-usuario por tu nombre de usuario real de GitHub.
Si ya tienes el repositorio vinculado, solo necesitas hacer git push cuando hagas cambios.
Paso 2 — Conectar Vercel con GitHub
- Ve a vercel.com y crea una cuenta. La forma más rápida es entrar con tu cuenta de GitHub.
- Haz clic en Add New → Project.
- Vercel te muestra tus repositorios de GitHub. Selecciona el de MiraMiEvento.
- Vercel detecta automáticamente que es un proyecto Next.js y prepara la configuración inicial.
- Antes de darle a Deploy, hay un paso importante: las variables de entorno.
Paso 3 — Las variables de entorno
Aquí está el punto más importante de este módulo, así que léelo despacio.
Tu código de MiraMiEvento necesita comunicarse con Supabase. Para eso usa dos datos: la URL de tu proyecto Supabase y una clave de acceso pública. En tu ordenador, esos datos están en un archivo llamado .env.local que nunca se sube a GitHub. Normalmente está incluido en el archivo .gitignore por seguridad.
Pero Vercel también necesita esos datos para que la app funcione cuando esté en sus servidores. Por eso existe la sección de Environment Variables en Vercel: es el lugar donde introduces esos valores de forma segura, sin escribirlos directamente dentro de tu código.
En la pantalla de configuración, antes de hacer deploy, añade estas dos variables:
| Nombre | Valor |
|---|---|
NEXT_PUBLIC_SUPABASE_URL | La URL de tu proyecto Supabase. Empieza por https:// |
NEXT_PUBLIC_SUPABASE_ANON_KEY | La anon key de tu proyecto Supabase |
Encuentras ambos valores en Supabase, dentro de Settings → API.
Estas son las dos variables mínimas para que una app con Supabase funcione en Vercel. Según lo que haga tu proyecto, necesitarás añadir más. Por ejemplo, si generas URLs firmadas desde el servidor necesitas también la SUPABASE_SERVICE_ROLE_KEY. Si usas un servicio de email, su clave API. Si tienes pagos, la clave de Stripe. La regla es siempre la misma: cualquier dato secreto que en tu ordenador está en el .env.local, en Vercel va en Environment Variables.
Una vez añadidas todas las variables que necesita tu proyecto, haz clic en Deploy.
Lo que ocurre al hacer Deploy
Vercel empieza a trabajar. Puedes ver el proceso en tiempo real: descarga el código, instala las dependencias y construye la app.
Si todo va bien, en menos de dos minutos verás una pantalla de éxito con una URL del tipo:
https://miramievento.vercel.appEsa URL ya es pública. Cualquier persona en el mundo puede abrirla desde su móvil. MiraMiEvento está en internet.
Dominio propio, opcional
Vercel te da una URL gratuita con .vercel.app. Si tienes un dominio propio, como miramievento.com, puedes conectarlo desde Settings → Domains dentro de tu proyecto de Vercel.
El proceso tarda unos minutos y Vercel te va guiando paso a paso.
Qué pasa cuando actualizas el código
Aquí está una de las partes más cómodas de trabajar con Vercel.
Cada vez que haces git push a tu repositorio de GitHub, Vercel detecta el cambio automáticamente y despliega la nueva versión. No tienes que entrar a Vercel ni hacer nada manualmente.
En unos minutos, el cambio está publicado.
Y si algo falla, Vercel mantiene la versión anterior activa. Puedes revisar el error, corregirlo y volver a subir el código. También puedes volver a una versión anterior desde el historial de despliegues.
El mapa completo
Ahora el sistema de MiraMiEvento tiene todas sus piezas en su sitio:
- Supabase — guarda los datos, las fotos y los códigos de acceso
- GitHub — guarda el código con historial de cambios
- Vercel — coge el código de GitHub y lo pone en internet automáticamente
Cuando un invitado abre el álbum desde su móvil, introduce su código y ve las fotos, está usando los tres servicios a la vez.
Supabase responde con los datos. Vercel sirve la interfaz. GitHub guarda la historia de cómo se construyó todo.
Y los tres tienen plan gratuito para empezar.
En el siguiente módulo
En el módulo 8 juntamos Supabase y Vercel en el flujo real de trabajo: cómo hacer un cambio en el código, subirlo a GitHub y verlo desplegado en minutos.
El ciclo completo de trabajo de una persona que desarrolla.
Fuentes
- Next.js on Vercel | Vercel Docs — documenta cómo Vercel detecta automáticamente proyectos Next.js, realiza el build y los despliega con zero-config.
- Deploying GitHub Projects with Vercel | Vercel Docs — explica la integración automática con GitHub: cada push a la rama principal dispara un nuevo despliegue a producción.
- Environment variables | Vercel Docs — documenta cómo configurar las variables de entorno (como NEXT_PUBLIC_SUPABASE_URL) de forma segura en el panel de Vercel, sin escribirlas en el código.