How to Deploy a Next.js App to Vercel in 10 Minutes

Vercel + Next.js is the smoothest deploy on earth. Here's the no-fluff path.

Prerequisites

• A Next.js app (locally working, npm run dev opens it)
• A GitHub account
• A Vercel account (free, sign up with GitHub)

Step 1: Push to GitHub (2 min)

git init
git add .
git commit -m "initial"
gh repo create my-app --public --source=. --push

Step 2: Import to Vercel (3 min)

• vercel.com → Add New → Project → Import GitHub repo
• Vercel auto-detects Next.js, no config needed
• Click "Deploy"

90 seconds later you have a <your-app>.vercel.app URL.

Step 3: Environment variables (2 min)

Project Settings → Environment Variables. Add your secrets: - DATABASE_URL=postgresql://... - OPENAI_API_KEY=sk-...

Mark each as Production/Preview/Development. Re-deploy.

Step 4: Custom domain (2 min)

Project Settings → Domains → add yourdomain.com. Vercel shows you the DNS records to add. CNAME or A record (depending on your provider). SSL auto-issued via Let's Encrypt.

Step 5: Preview deployments (free, auto)

Every git push creates a preview URL. Every PR gets a comment with the preview link. This is the killer feature — feature branches just work.

Common gotchas

• API routes with Node-only packages (sharp, puppeteer) → set runtime to "nodejs" in route config
• Large bundles → enable ISR (revalidate: 60)
• Build memory errors → upgrade to Hobby+ ($20/mo) or split build

When to leave Vercel

If you cross 100 GB bandwidth/month consistently — overage gets expensive. Switch to Cloudflare Pages (unlimited bandwidth) or self-host on a VPS.

Hire a Next.js developer →