Vercel Playbook
Vercel Vercel A cloud platform that makes deploying websites dead simple. Push your code, get a live URL. Created by the team behind Next.js. "Like magic website publishing. Push to GitHub, and boom — it's live." Vercel A cloud platform that makes deploying websites dead simple. Push your code, get a live URL. Created by the team behind Next.js. "Like magic website publishing. Push to GitHub, and boom — it's live."
1What is Vercel?
Vercel is a cloud platform that deploys your frontend (and serverless backend) automatically. When you push code to GitHub, Vercel builds it, optimizes it, and serves it globally via a CDN.
Instant Deploys
Push to main, it's live in seconds.
Preview Deploys
Every PR gets its own URL to test.
Global CDN
Your site is fast everywhere.
2Multi-Project Hosting
One Account, Many Projects
Vercel lets you host unlimited projects under a single account. Each GitHub repo you connect becomes its own project with its own URL, domain, and settings.
Example: Your Vercel dashboard might look like:
Each project deploys independently
Each project has its own environment variables
Each project can have custom domains
All managed from one dashboard
3Shared Resources
The Power of One Account
When you host multiple projects under one Vercel account, they can share resources. This makes managing multiple sites way easier.
Consolidated Billing
One bill for all your projects. No juggling multiple accounts or payment methods.
Team Access
Add team members once, give them access to specific projects. Great for agencies or collaborations.
Integrations
Connect services like Neon, Supabase, or analytics once. Use them across projects without re-authenticating.
Domain Management
Buy and manage domains directly in Vercel. Assign them to any project with a few clicks.
Pro Tip: If you're building multiple apps for a client, keep them all under one Vercel project (or use a Team). Transfer ownership later if needed.
4Environment Variables
Vercel is Where Your Secrets Live
Your .env.local file is for LOCAL development. Vercel's Environment Variables are for PRODUCTION. They're two separate things.
Local Development
# .env.local (in your IDE)
DATABASE_URL="postgres://..."
API_KEY="sk-dev-xxx"
- • Lives on YOUR computer
- • Never committed to Git
- • Only works when running locally
Production (Vercel)
# Vercel Dashboard → Settings
DATABASE_URL="postgres://..."
API_KEY="sk-prod-xxx"
- • Lives on Vercel's servers
- • Encrypted and secure
- • Used when your site is deployed
How .env.local Works in Your IDE
When you run npm run dev, Next.js automatically loads variables from .env.local.
This file should be in your .gitignore so it never gets pushed to GitHub. Each developer on your team creates their own copy with their own keys.
# .gitignore
.env.local
.env*.local
Common Mistake
"It works locally but not in production!" — You probably forgot to add the environment variables in Vercel. They don't sync automatically.
Adding Environment Variables in Vercel
- 1Go to your project in the Vercel dashboard
- 2Click Settings → Environment Variables
- 3Add your key-value pairs (e.g.,
DATABASE_URL) - 4Choose which environments: Production, Preview, and/or Development
- 5Redeploy your project for changes to take effect
5The Vercel Workflow
Connect GitHub Repo
Link your repository to Vercel (one-time setup)
Add Environment Variables
Set your production secrets in Vercel dashboard
Push to Main
Every push triggers an automatic deploy
Live!
Your site is live at yourproject.vercel.app (or custom domain)
Ready to deploy?
Create a free Vercel account and connect your first repo.