Vercel Deploy

Vercel turns git push into a live URL. No servers, no Docker, no YAML. Push code, get a website. This is the deployment layer of your AI stack — and it eliminates an entire category of DevOps work.

Why Vercel Changes Everything

Traditional deployment means provisioning servers, configuring Nginx, setting up SSL certificates, building CI/CD pipelines, and praying nothing breaks at 2am. Vercel replaces all of that with one concept: push to GitHub, get a live site.

Vercel built Next.js, so the integration is seamless — zero configuration, automatic optimizations, and deployment that works the way it should: instantly and invisibly.

⚡

30-90 sec

From git push to live production URL — fully automated

🌐

50+ PoPs

Global edge network — users hit the closest server automatically

🔒

Auto SSL

HTTPS certificates provisioned and renewed automatically — zero config

The Deploy Pipeline

Every time you push to your main branch, Vercel triggers this exact sequence. Understanding it helps you debug when something goes wrong.

1. git push origin main — your code reaches GitHub

2. Detect — Vercel identifies your framework (Next.js, React, Astro, etc.) automatically

3. Install — runs npm install to fetch dependencies

4. Build — compiles your app (next build for Next.js), catches errors here

5. Deploy — distributes the built assets to 50+ global edge servers

6. Live! — your site is accessible at your-project.vercel.app (and your custom domain)

If the build fails: Vercel does NOT deploy the broken code. Your existing production site stays live and unaffected. Check the build logs in the Vercel dashboard — the error is almost always a TypeScript type error or a missing environment variable.

Environment Variables: The Security Gate

Environment variables are how your app accesses secrets (API keys, database URLs) without hardcoding them in your source code. In Next.js, the NEXT_PUBLIC_ prefix is the dividing line between safe and dangerous.

NEXT_PUBLIC_ (Browser-Safe)

Included in the browser bundle. Anyone can see these in your page source. Only use for values designed to be public — Supabase URL and anon key are fine (RLS protects data).

No Prefix (Server-Only)

Only accessible in server-side code (API routes, Server Components, middleware). ALL secret keys go here — Stripe secret, service role key, webhook secrets. Never prefix these with NEXT_PUBLIC_.

Vercel Dashboard — Environment Variables

# PUBLIC — safe for browser (RLS protects data)
NEXT_PUBLIC_SUPABASE_URL=https://<your-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...

# SECRET — server-side only (NEVER prefix with NEXT_PUBLIC_)
SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOi...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
RESEND_API_KEY=re_...

If you accidentally expose a secret: (1) Immediately revoke the key in that service's dashboard. (2) Generate a new key. (3) Update it in Vercel. (4) Redeploy. Assume the old key is compromised — git history is public and bots scan for leaked secrets within minutes.

Preview Deploys: Test Before You Ship

Every pull request gets its own unique URL. This is one of Vercel's most powerful features — it turns code review from "reading diffs" to "clicking a link and testing the actual app."

How It Works

Create a PR on GitHub → Vercel builds and deploys that branch → a unique preview URL (like my-app-git-feature-xyz.vercel.app) appears as a comment on your PR. Click it to test the changes in a real browser. The preview uses the same infrastructure as production.

✓

Why It Matters

Preview deploys catch problems that code review misses — layout bugs, broken links, mobile rendering issues, environment variable misconfigurations. They also let non-technical stakeholders review changes without setting up a local dev environment.

🔒

This lesson is for Pro members

Unlock all 520+ lessons across 52 courses with Academy Pro.

Go Pro — $49/mo ← Back to course

Already a member? Sign in to access your lessons.