Deploying to Vercel

Dashboard → Add New → Project → Import Git Repository

# Install CLI
npm install -g vercel

# Login
vercel login

# Deploy (development)
vercel

# Deploy to production
vercel --prod

Export → Deploy to Vercel → Follow prompts

Deploy → Vercel → Authorize

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/user/repo.git
git push -u origin main

Framework Preset: Next.js
Build Command: npm run build
Output Directory: (auto-detected)
Install Command: npm install
Node.js Version: 20.x

// package.json
{
  "scripts": {
    "build": "next build",
    "vercel-build": "prisma generate && next build"
  }
}

# Default production branch: main
git checkout main
git merge feature-branch
git push origin main
# → Production deployment started

Project → Deployments → Three dots → Promote to Production

vercel --prod

Deployments → Previous deployment → Three dots → Instant Rollback

Branch: feature/new-ui
URL: my-app-git-feature-new-ui-username.vercel.app

✓ Preview deployment ready
   Visit: https://my-app-abc123.vercel.app

Production: NEXT_PUBLIC_API_URL=https://api.example.com
Preview:    NEXT_PUBLIC_API_URL=https://staging-api.example.com

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

{
  "build": {
    "env": {
      "DATABASE_URL": "@database-url"
    }
  }
}

{
  "regions": ["iad1", "sfo1", "cdg1"]
}

my-monorepo/
├── apps/
│   ├── web/        → Project: my-app-web
│   └── docs/       → Project: my-app-docs
├── packages/
└── package.json

Root Directory: apps/web

// vercel.json in apps/web/
{
  "ignoreCommand": "git diff HEAD^ HEAD --quiet ."
}

// app/api/users/route.ts
export async function GET() {
  return Response.json({ users: [] })
}

// Deployed to: /api/users
// Type: Serverless Function

// app/api/heavy/route.ts
export const maxDuration = 60  // 60 seconds max
export const dynamic = 'force-dynamic'

export async function POST(request: Request) {
  // Long-running operation
}

// vercel.json
{
  "functions": {
    "app/api/heavy/route.ts": {
      "memory": 1024,
      "maxDuration": 60
    }
  }
}

// Revalidate every hour
export const revalidate = 3600

export default async function Page() {
  const data = await fetch('...')
  return <div>{data}</div>
}

Build Logs
├── Installing dependencies
├── Building (3 pages, 5 API routes)
├── Generating static pages
└── Deployment complete (45s)

Building → Ready / Error

Building: Compiling your application
Ready: Deployment successful
Error: Build or deployment failed

Dashboard → Deployments → Click deployment → Build Logs

Dashboard → Logs → Select function → View invocations

# Ensure dependencies are in package.json
npm install missing-package --save

# Fix locally first
npm run build

# Add missing vars in dashboard
Settings → Environment Variables

// Increase timeout (Pro plan)
export const maxDuration = 60

// Or optimize code
export async function GET() {
  // Break into smaller operations
}

// vercel.json - include extra files
{
  "includeFiles": ["data/**"]
}