Deploy en Vercel con variables Supabase

Publica tu proyecto en Vercel con confianza: conecta tu repositorio, configura las variables de entorno para Supabase y habilita el deploy automático desde GitHub. En minutos tendrás tu versión de Suplatsigram online con un dominio público, lista para compartir y seguir iterando sin fricción.

¿Cómo publicar en Vercel tu app con Next.js y Supabase?

Para empezar, ingresa a vercel.com, inicia sesión o regístrate y crea un nuevo proyecto a partir de tu repositorio. Vercel detecta el repo, la rama principal (por ejemplo, main), el scope de tu cuenta y te propone un nombre interno para el proyecto.

• Objetivo: tener una URL pública que se actualiza con cada push.
• Plataforma: Vercel, creadores de Next.js.
• Resultado: tu app accesible y funcionando igual que en local, pero en la nube.

¿Cómo iniciar sesión y acceder al panel de Vercel?

• Entra a vercel.com.
• Inicia sesión o regístrate con Gmail, GitHub, Bitbucket o GitLab.
• Accede a tu panel de proyectos.

¿Cómo importar el repositorio y elegir la rama?

• Crea un proyecto nuevo e importa el repo.
• Revisa la rama que usará como principal (p. ej., main).
• Confirma el scope de tu cuenta y el nombre interno.
• Haz clic en Crear para iniciar la importación.

¿Qué pasos seguir para configurar variables de entorno en Vercel?

Si aparece un error de pre-render o falta de URL, casi siempre es por variables de entorno ausentes. La conexión a Supabase se hace desde el front con dos datos: URL y key. Debes migrar tu .env del repo al apartado de Variables de entorno en Vercel.

• Variables clave: URL y clave de Supabase.
• Acción: pega el contenido de tu .env; Vercel detecta los dos ítems.
• Advertencia: Vercel avisa que la key es "insegura"; para efectos prácticos se deja así.
• Siguiente paso: guardar y hacer redeploy.

npm run build

• Si corres el build sin variables, falla tanto en la nube como en local.

¿Cómo resolver el error de pre-render?

• Ve a Settings del proyecto.
• Entra a Variables de entorno.
• Pega el contenido del .env con URL y key de Supabase.
• Guarda y ejecuta redeploy.

¿Qué considerar sobre la seguridad de la key?

• Vercel muestra una alerta por la key.
• Para avanzar, se mantiene la configuración actual.
• Quedará pendiente endurecer accesos más adelante.

¿Cómo validar el deployment y activar el flujo automático?

Tras guardar las variables, inicia el redeploy. En la página del deployment verás la terminal instalando dependencias y ejecutando el build. Cuando el estado sea ready, Vercel asigna un dominio y tu app queda pública.

• Estado ready: confirma que el build fue exitoso.
• Dominio asignado: la app queda disponible en Internet.
• Verificación: revisa las vistas como el ranking y la data desde Supabase.

¿Qué muestra la página de deployment?

• Detalle del entorno de producción.
• Rama desplegada, por ejemplo, main.
• Último commit integrado.
• Progreso de instalación y build mediante la CLI de Vercel.

¿Qué sigue después del primer despliegue?

• Comparte el enlace público con quien quieras.
• Prueba en dispositivos móviles y valida carga de imágenes.
• Mantén el flujo automático de deploy con GitHub: cada push dispara un nuevo despliegue.
• Agrega seguridad más adelante para controlar creación de cuentas.

¿Tienes dudas sobre el deploy o las variables de entorno en Vercel con Supabase? Deja tu comentario y cuéntanos qué parte quieres profundizar.