explainer

Vercel 101

The always-on computer that serves your site to the world — and rebuilds it automatically every time you push.

free tier is plenty5 min read

What Vercel actually is

Your laptop turns off. Vercel doesn't. A host runs your site on computers that are always on, at an address anyone can reach — that's the whole job. “Deploying” just means moving your site onto those computers.

The full pipeline, left to right:

your laptopGitHubVercelyour visitors

You push code to GitHub. Vercel notices, builds a fresh copy of your site, and serves it. You never upload anything to Vercel directly — it always pulls from GitHub.

The magic loop: push = deploy

Once a project is connected, every push to GitHub triggers a fresh deploy— about a minute from push to live. No upload button, no “publish” step, nothing to remember. This is why every guide on this site nags you to push: pushing is publishing.

💡 tipEach deploy is listed in your Vercel dashboard with its own preview link. If a deploy breaks something, the previous one is still there — instant rollback is one click.

Connecting a project (you do this once)

vercel.comContinue with GitHubAdd New… → ProjectImport your repoDeploy

One repo, one Vercel project. Leave every setting as-is — Vercel detects Next.js (and most frameworks) automatically. A minute later you have a live .vercel.app address; connecting your own domain is a Domains 101 topic.

Environment variables — where secrets live

Your project's secrets (API keys, database passwords) live in a file called .env.local that — on purpose — never gets pushed to GitHub (the full story is in Environment Variables). Which means your live site can't see them. You give Vercel its own copy:

Your projectSettingsEnvironment Variablesadd each oneRedeploy

🩹“Works on localhost, breaks on Vercel”

Nine times out of ten this is a missing environment variable. Ask Claude:

paste into Claude Code
My site works on localhost but breaks on Vercel. List every
environment variable this project needs so I can add them
in Vercel's settings.

What free actually covers

For personal projects, effectively everything: hosting, automatic rebuilds, a free .vercel.app address, your own custom domains, and the security certificate (the padlock in the browser) handled for you. You'd only pay once a project has real traffic or a team behind it.

💡 tipThe free tier requires the connected GitHub account to match the account making commits. If a deploy is ever “blocked,” tell Claude — it's a two-minute fix to align your git email with your GitHub account.

When a build fails

Sometimes a push deploys fine on your machine but fails Vercel's stricter build. Vercel shows a log of red text — don't read it, relay it:

paste into Claude Code
My Vercel deploy failed. Here's the build log: [paste it].
Fix the issue and push the fix.

Your site stays up on the last good deploy the whole time — a failed build never takes you offline.