Vercel Deployment

~18 min · Vercel, git push, preview

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

The simplest deploy on the planet

Connect a repo to Vercel; every push to main ships to production, every PR gets a unique preview URL. The platform was built by the team that builds the framework, so the defaults are correct.

What you get without configuring anything

Automatic builds + cache
Preview deployments per PR
Edge function support
Image optimization at the edge
ISR distributed across the global cache
Web Analytics and Speed Insights opt-in

Environment variables

Set them in the dashboard or via CLI. Three scopes: production, preview, development. Preview can have separate values from production — useful for staging databases.

Code

Two ways to deploy·bash

# Option 1 — CLI
npm i -g vercel
cd my-app
vercel             # interactive: link to org/project
vercel --prod      # promote to production

# Option 2 — Git integration
# Connect repo at vercel.com → push to main = production deploy

Env vars per environment·bash

vercel env add DATABASE_URL production
vercel env add NEXT_PUBLIC_API_URL preview development

# Preview URLs can use a staging DB while production uses live.

External links

Vercel + Next.js

Exercise

Deploy a project to Vercel either via CLI or by connecting a repo. Open a PR and confirm the preview URL renders the change. Set a different DATABASE_URL for preview vs production.

Progress

Progress is local-only — sign in to sync across devices.

← 🎨 Styling, Images & OptimizationQuiz · 4 questions Next →Self-Hosting

Spotted a bug or have feedback on this page?Report an Issue

Comments 0

🔔 Reply notifications (sign in)

No comments yet — be the first.