Introdução ao Deploy na Vercel - Publicando Apps Next.js

O que você aprenderá neste tutorial

✓ Criar conta na Vercel
✓ Conectar repositório GitHub
✓ Configurar deploy automático
✓ Configurar variáveis de ambiente
✓ Configurar domínio customizado

Step 1: Criar conta na Vercel

1. Acesse vercel.com
2. Sign Up → Continue with GitHub
3. Conecte sua conta GitHub

Step 2: Importar projeto

1. Clique em New Project
2. Import Git Repository
3. Selecione o repositório
4. Verifique as configurações em Configure Project
5. Clique em Deploy

Step 3: Deploy local

# Instalar Vercel CLI
npm install -g vercel

# Login
vercel login

# Deploy
vercel

# Deploy para produção
vercel --prod

Step 4: Configurar variáveis de ambiente

Dashboard → Project → Settings → Environment Variables

1. Insira Key e Value
2. Selecione Environment (Production/Preview/Development)
3. Clique em Add

# Configurar via CLI
vercel env add VARIABLE_NAME

# Importar de .env.local
vercel env pull

Step 5: Domínio customizado

1. Settings → Domains
2. Insira o nome do domínio
3. Configure o registro DNS
   - Registro A: 76.76.21.21
   - Ou CNAME: cname.vercel-dns.com
4. Certificado SSL é emitido automaticamente

Step 6: Deploy de preview

- Ao criar PR, URL de preview é gerada automaticamente
- URL de preview é postada como comentário no PR
- Possibilita verificação antes do merge

Step 7: Configuração 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
    }
  ]
}

Melhores Práticas

✓ Sempre configure variáveis de ambiente no dashboard
✓ Use deploy de preview para revisar PRs
✓ Use Edge Functions para distribuição global
✓ Monitore performance com Analytics

Resumo

Vercel é uma plataforma otimizada para Next.js, com deploy automático integrado ao GitHub e recursos convenientes de preview.