How to deploy a Next.js application to Vercel

Deploying to Vercel

Vercel is built by the creators of Next.js and requires zero configuration for most projects. Connect your GitHub repo and every push deploys automatically.

# Install Vercel CLI for manual deploys
npm install -g vercel
vercel          # Deploy to preview
vercel --prod   # Deploy to production

Environment Variables

Never commit secrets to Git. In the Vercel dashboard: Project → Settings → Environment Variables. Add each variable and choose which environments (Production, Preview, Development) it applies to. Vercel automatically makes them available during build and runtime.

Pre-Deployment Checklist

# Run locally before pushing
npm run build   # Catches type errors and build failures
npm run start   # Test the production build locally
npm run lint    # Fix all ESLint warnings

Database on Production

Use a managed database like Vercel Postgres, Supabase, or PlanetScale. Set the production DATABASE_URL in Vercel environment variables. Run migrations against production before or during deployment:

# In your package.json
"scripts": {
  "postinstall": "prisma generate",
  "build": "prisma migrate deploy && next build"
}

Running prisma migrate deploy (not migrate dev) in the build script applies pending migrations automatically on each Vercel deployment. migrate dev is for local development only — it creates migration files. migrate deploy applies existing migration files without creating new ones.