Training
Certification Leadership Frameworks Agentic for Business
Community Keynotes Retreat Blog Book A Consultation
Protocol 06 of 18 · Track, Infrastructure · The rails

Vercel hygiene, domains and DNS

How deployments work, how custom domains attach, and the DNS basics you need so a site goes live cleanly the first time.

Protocol 05 GitHub hygiene, check-in and check-out All 18 Protocol 07 Supabase, data structures basics
Why this matters

The pain it
solves

GitHub stores your code. Vercel ships it to the internet. The seam between those two is where most why-isn't-my-site-working frustration lives.

The good news: Vercel is the friendliest deployment platform that has ever existed. Push to GitHub, get a URL. The discipline you need is small.

The teaching

What this
actually is

How a Vercel deploy actually works

Vercel does one thing, brilliantly: it watches your GitHub repo and ships your code to the internet every time you push. Three pieces are worth understanding.

  • Every push triggers a build
    Push to any branch, Vercel builds it. You never deploy manually. The build runs your project's build command (npm run build), then publishes the output.
  • Every branch gets a preview URL
    Push to feature/foo and you get foo-myproject.vercel.app. Share it. Review on it. Production is untouched until you merge to main.
  • Every push to main updates production
    Merge a PR, production rebuilds in under a minute. The same build pipeline as previews. No surprises at deploy time.

Environment variables live on Vercel, not in your code

The single most common reason a site works locally and breaks in production is a missing environment variable. Once you internalise that, prod debugging gets short.

On your laptop, .env.local holds your local secrets. On Vercel, the project settings hold the production secrets. Vercel injects them at build and at runtime. Your code does not change between local and prod, but the env vars do.

Rule: when prod breaks but local works, your first move is to compare .env.local with the Vercel env settings. 80% of the time, that is the bug.

Custom domains attach in two places

To put your site on yourcompany.com instead of yourcompany.vercel.app, you change two things at once.

  • On DNS (at your registrar)
    Add a CNAME or A record that points your domain at Vercel's servers. Vercel gives you the exact records to copy.
  • On Vercel (in project settings)
    Tell Vercel to attach the domain to a specific project. It will verify the DNS, issue an SSL certificate, and start serving.

The gotcha that costs every cohort hours

Vercel auto-detects Next.js when the project is at the root of the repo. If your Next.js app lives in a subfolder (a monorepo, or alongside other apps), Vercel will not find it.

Fix: in project settings, set the root directory to the subfolder where your package.json lives. Two clicks. Costs less than five minutes once you know.

Try it yourself 30 minutes

Attach a custom domain, swap an env var, redeploy in 30 minutes

You need the Hello World project from Protocol 02 deployed on Vercel, and a domain you control (any registrar). If you do not own a domain yet, register one for $10 first; you will use it on every IL project from now on.

  1. Step 01
    Add the domain on Vercel

    In your Vercel project, Settings > Domains > Add. Type your domain. Vercel will tell you what DNS records to create.

  2. Step 02
    Add the DNS records at your registrar

    Open your domain registrar (GoDaddy, Namecheap, Cloudflare). Find DNS settings. Add the records Vercel showed you (usually a CNAME for www, an A record for the root).

  3. Step 03
    Wait for DNS to propagate

    Usually 1 to 10 minutes. Vercel auto-detects when DNS resolves and provisions an SSL certificate. The domain badge turns green.

  4. Step 04
    Add an environment variable

    In Settings > Environment Variables, add MY_TEST_VAR = hello. Save. Pick all three environments (Production, Preview, Development).

  5. Step 05
    Use the env var in code

    In Claude Code: "On the homepage, render the value of process.env.MY_TEST_VAR. Commit and push." Watch the build run.

  6. Step 06
    Visit your live URL

    Open yourdomain.com. See hello. Now change the env var on Vercel to hello world. Redeploy (Deployments > ... > Redeploy). Refresh. The new value is live.

Outcome

Your own custom domain serving your site. An env var changed and surfaced live. The distinction between preview URLs and production locked in.

Official resources

Straight from
the source

What you walk out with

By the end of this
protocol

At the retreat

You learn it by
doing it

You attach your own custom domain end-to-end, DNS records and all, and watch your Hello World go from a Vercel preview URL to your real .com.

Connects to

Other protocols this
compounds with

← Previous, Protocol 05 Next, Protocol 07 →