What You'll Build
Your app deployed to a live URL with automatic deploys, preview URLs for branches, environment variables configured, and a custom domain connected.
Time: ~15 minutes Prerequisites: Code on GitHub (follow this first)
Step 1: Import Your Project
Go to vercel.com → Sign up with GitHub → New Project → Import Git Repository → Select your repo → Deploy.
Vercel auto-detects Next.js, React, and Vite. No configuration needed for standard Bolt or Lovable exports.
Checkpoint: Vercel shows "Congratulations!" and gives you a URL like your-app-abc123.vercel.app.
If the build fails with "Cannot find module", a dependency is missing from package.json. Run npm install locally, commit, push again. See full fix.
Step 2: Add Environment Variables
Your .env.local file never gets pushed to GitHub — that's correct. But Vercel needs those values.
Go to Vercel Dashboard → Your Project → Settings → Environment Variables and add each key:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY CLERK_SECRET_KEY NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY STRIPE_SECRET_KEY STRIPE_WEBHOOK_SECRET NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY RESEND_API_KEY
After adding env vars, redeploy: Deployments → latest → Redeploy. Env vars only apply to new deployments.
Checkpoint: Your app loads without "undefined" errors or blank screens.
If the app shows a blank screen, open DevTools → Console. The error is there — usually a missing env var. See blank screen fix.
Step 3: Preview Deployments
- Every git branch gets its own URL automatically:
mainbranch → production (your-app.vercel.app)- Feature branch → preview (
your-app-git-feature.vercel.app)
Push a branch, test on a unique URL, merge to main when ready.
Step 4: Connect Your Domain
Vercel Dashboard → Your Project → Settings → Domains → Add domain.
Add these DNS records at your registrar:
A record: @ → 76.76.21.21 CNAME record: www → cname.vercel-dns.com
Delete any existing A/CNAME records for @ and www first — conflicts break SSL.
DNS changes take 5-30 minutes. Vercel shows green checkmarks when working.
Checkpoint: your-domain.com loads with a green SSL padlock.
If SSL stays "pending" for hours, check DNS records match exactly. See domain fix.