Next.js Lesson 12: Deploy to Vercel

ByBeginnerCoder Team June 30, 2026July 1, 2026

▲ Next.js CourseLesson 12 of 12 · 100% complete

Vercel is the company behind Next.js and offers the best Next.js hosting. Deployment takes under 2 minutes.

# 1. Install Vercel CLI (optional)
npm install -g vercel

# 2. Push to GitHub
git init && git add . && git commit -m "Initial"
git push origin main

# 3. Go to vercel.com → "Add New Project"
# 4. Import your GitHub repo
# 5. Add environment variables from .env.local
# 6. Click Deploy!
# You get: your-project.vercel.app

vercel.json Config

{
  "regions": ["iad1"],      // deploy region
  "functions": {
    "app/api/**/*.ts": {
      "maxDuration": 30     // API timeout in seconds
    }
  }
}

Environment Variables

# In Vercel dashboard → Settings → Environment Variables
# Add each variable from your .env.local:
DATABASE_URL=postgresql://...
NEXTAUTH_SECRET=...
GITHUB_ID=...
GITHUB_SECRET=...

# Vercel auto-sets VERCEL_URL, NODE_ENV etc.

# For database: use Vercel Postgres or PlanetScale
# (SQLite won't work on Vercel — need a hosted DB)

You completed the Next.js course!

What to build next:

Full-stack project: Combine Next.js + Prisma + NextAuth + Vercel
Stripe integration: Add payments to your app
Edge functions: Ultra-fast serverless at the edge

🏋️ Practice Task

Deploy your Next.js blog (from lesson 11) to Vercel. Create a PostgreSQL database (Vercel Postgres or Supabase free tier). Update DATABASE_URL. Run prisma migrate. Verify all routes work live.

💡 Hint: Switch schema: provider = “postgresql”. Use Supabase free tier for database. Update DATABASE_URL in Vercel env vars.

← PreviousLesson 12 of 12Course Complete!