Deploy en Vercel

Vercel es la plataforma creada por el equipo de NextJS. Es la forma más fácil y rápida de desplegar aplicaciones NextJS.

¿Por qué Vercel?

✅ Zero-config - Funciona sin configuración ✅ Deploy automático - Push a Git = deploy automático ✅ Preview deployments - Cada PR tiene su preview ✅ Edge Network - CDN global incluido ✅ Analytics gratuito - Métricas de performance ✅ Optimizado para NextJS - Hecho por el mismo equipo

Método 1: Deploy desde Git (Recomendado)

Paso 1: Sube tu código a Git

Si aún no tienes tu proyecto en Git:

git init
git add .
git commit -m "Initial commit"

# Conecta con GitHub
git remote add origin https://github.com/tu-usuario/tu-proyecto.git
git push -u origin main

Paso 2: Conecta con Vercel

Ve a vercel.com
Click en "Sign Up" o "Log In"
Conecta con GitHub, GitLab o Bitbucket
Autoriza a Vercel

Paso 3: Importa tu proyecto

Click en "Add New" → "Project"
Selecciona tu repositorio
Click en "Import"

Vercel detecta automáticamente:

Que es un proyecto NextJS
El comando de build (npm run build)
El output directory (.next)

Paso 4: Configura (opcional)

Por defecto funciona sin configuración, pero puedes ajustar:

Framework Preset: Next.js (auto-detectado) Root Directory: ./ (si tu app está en subcarpeta, cámbialo) Build Command: npm run build Output Directory: .next

Paso 5: Deploy

Click en "Deploy"
Espera ~2 minutos
¡Listo! Tu app está en https://tu-proyecto.vercel.app

💡

Deploy automático

Cada vez que hagas push a tu rama principal (main/master), Vercel desplegará automáticamente. No necesitas hacer nada más.

Método 2: Deploy con CLI

Instalar CLI

npm install -g vercel

vercel login

Te pedirá que confirmes desde tu email.

Deploy

# Desde la carpeta de tu proyecto
vercel

# Primera vez: responde las preguntas
# Set up and deploy? [Y/n]: Y
# Which scope? [tu-usuario]
# Link to existing project? [y/N]: N
# What's your project's name? [nombre-carpeta]
# In which directory is your code? [./]
# Auto-detected Project Settings (Next.js)
# Deploy? [Y/n]: Y

Deploy a producción

vercel --prod

Variables de entorno

Desde el dashboard

Ve a tu proyecto en Vercel
Settings → Environment Variables
Agrega tus variables:

Name: DATABASE_URL
Value: postgresql://...
Environment: Production, Preview, Development

⚠️

Variables públicas

Variables con NEXT_PUBLIC_ se incluyen en el bundle del cliente. Úsalas solo para valores públicos como URLs de API.

Variables sin prefijo son privadas y solo existen en el servidor.

Desde CLI

# Agregar variable
vercel env add DATABASE_URL

# Selecciona ambiente: Production, Preview, Development

# Ver variables
vercel env ls

# Eliminar variable
vercel env rm DATABASE_URL

Desde archivo .env

# .env.local para desarrollo local
DATABASE_URL="postgresql://localhost/midb"
NEXT_PUBLIC_API_URL="http://localhost:3000"

# Las variables de producción las configuras en Vercel

Preview Deployments

Cada pull request obtiene su propio deployment preview:

Cómo funciona

Creas una branch: git checkout -b nueva-feature
Haces cambios y push: git push origin nueva-feature
Creas un Pull Request en GitHub
Vercel despliega automáticamente un preview
Obtienes URL única: https://tu-proyecto-abc123.vercel.app
Pruebas cambios antes de mergear
Merge a main → Deploy automático a producción

Comentario en PR:

✅ Deployment
🔍 Inspect: https://vercel.com/...
✅ Preview: https://tu-proyecto-abc123.vercel.app

Dominio personalizado

Agregar dominio

Settings → Domains
Agrega tu dominio: mitienda.com
Click en "Add"

Configurar DNS

Vercel te dará instrucciones específicas:

Opción A: Nameservers (recomendado)

ns1.vercel-dns.com
ns2.vercel-dns.com

Ve a tu registrador de dominios (GoDaddy, Namecheap, etc) y cambia los nameservers.

Opción B: A Record

Type: A
Name: @
Value: 76.76.21.21

Opción C: CNAME

Type: CNAME  
Name: www
Value: cname.vercel-dns.com

# Vercel detecta automáticamente, pero puedes override:

Build Command: npm run build
Output Directory: .next
Install Command: npm install
Development Command: npm run dev

Root Directory

Si tu app está en una subcarpeta:

Root Directory: apps/web

Node.js Version

# En package.json
{
  "engines": {
    "node": ">=18.0.0"
  }
}

Environment Variables por deployment

# Production
DATABASE_URL=postgresql://prod...

# Preview
DATABASE_URL=postgresql://staging...

# Development (local)
DATABASE_URL=postgresql://localhost...

Funciones Serverless

Vercel convierte tus API Routes y Server Components en funciones serverless automáticamente.

Limits

Hobby (Gratis):

Timeout: 10 segundos
Memoria: 1024 MB
Tamaño de función: 250 MB

Pro ($20/mes):

Timeout: 60 segundos
Memoria: 3008 MB
Tamaño de función: 250 MB

Configurar timeout

// app/api/long-task/route.ts
export const maxDuration = 60 // Segundos (solo en Pro)

export async function GET() {
  // Tarea que toma tiempo
  await longRunningTask()
  return Response.json({ ok: true })
}

Edge Functions

Para latencia ultra-baja:

// app/api/edge/route.ts
export const runtime = 'edge'

export async function GET() {
  return Response.json({ 
    message: 'Esta función corre en el edge, cerca del usuario' 
  })
}

Edge vs Serverless:

	Edge	Serverless
Latencia	< 50ms	100-300ms
Límites	Estrictos	Flexibles
Node APIs	Limitados	Completos
Use case	APIs simples	Lógica compleja

Monitoreo

Speed Insights

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

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

Ve métricas en: Dashboard → Speed Insights

Analytics

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

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

Ve datos en: Dashboard → Analytics

Logs

# Ver logs en tiempo real
vercel logs [deployment-url]

# Ver logs de producción
vercel logs --prod

O desde dashboard: Deployments → [click en deployment] → View Function Logs

Rollback

Si un deploy tiene problemas:

Desde dashboard

Ve a Deployments
Encuentra el deployment anterior que funcionaba
Click en "⋯" → Promote to Production

Desde CLI

# Lista deployments
vercel ls

# Promover deployment anterior
vercel promote [deployment-url]

Redirecciones y Rewrites

En next.config.js

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-blog/:slug',
        destination: '/blog/:slug',
        permanent: true, // 301
      },
      {
        source: '/tienda',
        destination: '/productos',
        permanent: false, // 302
      },
    ]
  },
  
  async rewrites() {
    return [
      {
        source: '/api/old/:path*',
        destination: '/api/new/:path*',
      },
    ]
  },
}

Con vercel.json

{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],
  "rewrites": [
    {
      "source": "/blog/:slug",
      "destination": "/news/:slug"
    }
  ]
}

Protección de branches

Vercel Deployment Protection

Settings → Deployment Protection

Opciones:

Password Protection
Trusted IPs only
Vercel Authentication (requiere login)

Útil para:

Proteger previews
Staging environments
Internal tools

Integrations

Vercel se integra con:

Bases de datos

Vercel Postgres (incluido)
Vercel KV (Redis)
PlanetScale
MongoDB Atlas
Supabase

CMS

Sanity
Contentful
Strapi
WordPress

Monitoring

Sentry
LogRocket
Datadog

Ve a: Dashboard → Integrations

Colaboración en equipo

Invitar miembros

Settings → Members
Invite Member
Asigna rol:
- Owner: Control total
- Member: Deploy y configuración
- Viewer: Solo ver

Proteger producción

Settings → Git

Production Branch: main
Preview Deployments: Todas las branches

Solo main despliega a producción, el resto son previews.

Costos

Hobby (Gratis)

✅ Incluye:

Deployments ilimitados
100 GB bandwidth
Serverless Functions
Edge Network
SSL automático
Preview deployments

❌ Límites:

1 usuario
Sin protección de password
Sin analytics avanzado

Pro ($20/mes por usuario)

Todo de Hobby +

Múltiples usuarios
1 TB bandwidth
Password protection
Analytics avanzado
Priority support
Function timeout: 60s

Enterprise (Custom)

Todo de Pro +

SLA 99.99%
Soporte dedicado
SSO/SAML
Advanced security

Troubleshooting

Build falla

# Error: ENOENT: no such file
→ Verifica paths relativos, usa path.join()

# Error: Module not found
→ npm install esa dependencia

# Error: Out of memory
→ Reduce bundle size o upgrade a Pro

404 en producción

# Verifica que la página existe
# Revisa redirects en next.config.js
# Limpia cache: Settings → Data Cache → Purge

Variables de entorno no funcionan

# Verifica que están en Settings → Environment Variables
# Redeploy después de agregar variables
# Variables con NEXT_PUBLIC_ para cliente

Función timeout

# Hobby: máximo 10s
# Pro: máximo 60s
# Optimiza la función o divide en partes

Mejores prácticas

1. Usa preview deployments

Prueba cambios antes de mergear:

# Crea branch
git checkout -b feature

# Push y crea PR
git push origin feature

# Vercel crea preview automáticamente
# Prueba en URL de preview
# Merge cuando esté listo

2. Configura protección

# Protege previews con password
Settings → Deployment Protection → Password

3. Monitorea performance

# Instala Speed Insights
# Revisa métricas semanalmente
# Optimiza páginas lentas

4. Automatiza con Git

# main → Producción
# develop → Staging (preview protegido)
# feature/* → Previews temporales

5. Usa Analytics

# Identifica páginas más visitadas
# Optimiza las que tienen más tráfico
# Detecta errores con logs

Resumen

Deploy en Vercel:

Conecta repositorio Git
Vercel detecta NextJS automáticamente
Configura variables de entorno
Deploy con un click
Cada push = deploy automático

Características principales:

Zero-config
Preview deployments por PR
SSL automático
Edge Network global
Analytics incluido

Costos:

Gratis para proyectos personales
$20/mes para equipos
Escala según uso

Próximo: Static Exports para sitios sin servidor

Producción

Static Exports

Documentación

Deploy automático

Variables públicas