Introduccion al Despliegue en Vercel - Publicar Apps Next.js

Lo que aprenderas en este tutorial

✓ Creacion de cuenta Vercel
✓ Conexion con repositorio GitHub
✓ Configuracion de despliegue automatico
✓ Configuracion de variables de entorno
✓ Dominio personalizado

Step 1: Crear cuenta Vercel

1. Ir a vercel.com
2. Sign Up → Continue with GitHub
3. Conectar cuenta de GitHub

Step 2: Importar proyecto

1. Clic en New Project
2. Import Git Repository
3. Seleccionar repositorio
4. Verificar configuracion en Configure Project
5. Clic en Deploy

Step 3: Despliegue desde local

# Instalar Vercel CLI
npm install -g vercel

# Iniciar sesion
vercel login

# Desplegar
vercel

# Despliegue a produccion
vercel --prod

Step 4: Configurar variables de entorno

Dashboard → Project → Settings → Environment Variables

1. Ingresar Key y Value
2. Seleccionar Environment (Production/Preview/Development)
3. Clic en Add

# Configurar via CLI
vercel env add VARIABLE_NAME

# Importar desde .env.local
vercel env pull

Step 5: Dominio personalizado

1. Settings → Domains
2. Ingresar nombre de dominio
3. Configurar registros DNS
   - Registro A: 76.76.21.21
   - O CNAME: cname.vercel-dns.com
4. Certificado SSL se emite automaticamente

Step 6: Preview Deployments

- Al crear PR se genera automaticamente una URL de preview
- La URL de preview se publica como comentario
- Permite verificar antes de merge

Step 7: Configuracion vercel.json

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

Mejores practicas

✓ Siempre configurar variables de entorno en el dashboard
✓ Usar preview deployments para revisar PRs
✓ Usar Edge Functions para distribucion global
✓ Monitorear rendimiento con Analytics

Resumen

Vercel es una plataforma optimizada para Next.js, con despliegue automatico integrado con GitHub y funciones de preview muy convenientes.