Día 5: Deploy y Dominio

Tu aplicación funciona en local — hoy la pones en internet para que el mundo pueda acceder a ella. Vercel hace el deploy de Next.js en minutos sin configuración compleja. Conectarás un dominio propio, configurarás las variables de entorno de producción y activarás el monitoreo básico. Al terminar el día tendrás una URL real que puedes compartir.

Objetivo del día

La aplicación está desplegada en producción con dominio propio, HTTPS activo, variables de entorno de producción configuradas y al menos un deploy preview funcionando para probar cambios futuros sin romper producción.

Deploy inicial en Vercel (10 minutos)

Vercel detecta automáticamente proyectos Next.js y los configura sin tocar nada. El proceso completo:

Ve a vercel.com y crea una cuenta con tu cuenta de GitHub.
Haz clic en Add New Project e importa el repositorio de GitHub de tu SaaS.
Vercel detecta Next.js automáticamente. No cambies nada en la configuración por ahora.
Haz clic en Deploy.

El primer deploy tarda 2-3 minutos. Obtendrás una URL temporal tipo mi-saas-abc123.vercel.app.

Si el build falla, copia el error del log y pásalo a Claude:

Este error ocurre al hacer build de mi Next.js en Vercel: [error].
Mi código local funciona. ¿Qué puede estar causando la diferencia?

Configura las variables de entorno de producción

Este paso es crítico. En local usas .env.local, en Vercel debes configurarlas manualmente (nunca subas .env.local a GitHub).

En el dashboard de Vercel, ve a tu proyecto → Settings → Environment Variables y añade:

NEXT_PUBLIC_SUPABASE_URL          → [tu URL de Supabase]
NEXT_PUBLIC_SUPABASE_ANON_KEY     → [tu anon key]
SUPABASE_SERVICE_ROLE_KEY         → [tu service role key]
STRIPE_SECRET_KEY                 → sk_live_... (clave de PRODUCCIÓN)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY → pk_live_...
STRIPE_PRICE_ID                   → price_... (de producción)
STRIPE_WEBHOOK_SECRET             → lo obtendrás en el siguiente paso
NEXTAUTH_URL                      → https://tudominio.com

Importante: usa las claves live de Stripe (no las de test) para producción. Las claves live empiezan con sk_live_ y pk_live_.

Conecta tu dominio personalizado

Compra un dominio en Namecheap, Porkbun o cualquier registrador. Namecheap suele tener dominios .com por $10-12/año.

En Vercel → Settings → Domains → añade tu dominio. Vercel te mostrará los registros DNS que debes configurar:

Registro A apuntando a 76.76.21.21
O registro CNAME con cname.vercel-dns.com

Configura estos registros en el panel DNS de tu registrador. La propagación tarda entre 5 minutos y 48 horas (normalmente menos de 1 hora).

El certificado SSL/HTTPS se activa automáticamente via Let's Encrypt — no necesitas hacer nada.

Configura el webhook de Stripe para producción

Con el dominio listo, ve a dashboard.stripe.com/webhooks y crea un nuevo endpoint:

URL: https://tudominio.com/api/stripe/webhook
Eventos: checkout.session.completed, customer.subscription.deleted, customer.subscription.updated

Copia el Signing secret y actualiza la variable STRIPE_WEBHOOK_SECRET en Vercel. Haz un nuevo deploy para que Vercel recargue las variables.

Preview deployments: prueba antes de romper producción

Vercel crea automáticamente un deploy preview por cada Pull Request o cada push a ramas que no sean main. Esto te permite:

Probar features nuevas en una URL temporal antes de que lleguen a producción
Compartir la preview con alguien para feedback antes de hacer merge
Ver exactamente cómo se ve el cambio en producción

Para activarlo, trabaja siempre en una rama distinta de main:

git checkout -b feature/nueva-feature
# haz cambios
git push origin feature/nueva-feature

Vercel crea automáticamente una URL de preview para esa rama.

Monitoreo con Vercel Analytics

En el dashboard de Vercel, activa Analytics (plan gratuito incluido). Te da:

Visitantes únicos y páginas vistas en tiempo real
Core Web Vitals (velocidad de carga, interactividad)
Países de origen del tráfico

Para activarlo en el código, añade en app/layout.tsx:

import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Herramientas IA del día

Claude — diagnóstico de errores de build, revisión de configuración de variables de entorno
Vercel Dashboard — deploy, dominios, variables de entorno, analytics, logs en tiempo real
Stripe Dashboard — configuración de webhooks de producción

Checklist del día

Primer deploy exitoso en Vercel (sin errores de build)
Todas las variables de entorno de producción configuradas en Vercel
Usando claves live de Stripe (no las de test) en producción
Dominio personalizado conectado y propagado
HTTPS activo (certificado SSL visible en el navegador)
Webhook de Stripe apuntando al dominio de producción
Preview deployments funcionando (push a rama de test y ver URL preview)
Vercel Analytics activado en el código
Flujo completo probado en producción: registro → pago → acceso al dashboard