Toolstools / vercel

Vercel

What this is

Vercel deploys web apps and websites from a GitHub repository.

It is commonly used for Next.js projects.

Why it matters

Learners need to see their work live, not just running locally.

A live deployment also makes testing and sharing easier.

What to do

Core idea

Flow

GitHub push -> Vercel build -> live URL

Every push to GitHub can trigger a new deployment.

Connect GitHub

Go to vercel.com.
Sign in with GitHub.
Allow Vercel access to the learner's repository.
Click Add New then Project.
Import the correct GitHub repo.

Visual checkpoint:

Terminal command

Vercel Import Project
  Repository: correct project
  Framework Preset: detected
  Root Directory: default unless project is nested
  Environment Variables: only if project needs them

Deploy

Keep the detected framework settings.
Add environment variables only if the project uses them.
Click Deploy.
Wait for the build to finish.
Open the live URL.
Test the main page and any forms/buttons.

Core features to understand

Feature	Meaning	Beginner action
Project	Vercel's connection to one GitHub repo	One class project = one Vercel project.
Deployment	One built version of the site	Open the newest deployment after pushing.
Production	Main live version	Usually comes from the `main` branch.
Preview	Temporary version for another branch/commit	Useful later, not needed for Vibe 101.
Build logs	Terminal output from Vercel	Read the first red error, not the whole page.
Environment variables	Secret settings stored on Vercel	Add them in Vercel, not in GitHub.
Domains	Custom URLs	Use later after the default URL works.

Environment variables

If the local project uses .env.local, Vercel needs matching variables in the project settings.

Example:

Setting

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

After adding new environment variables, redeploy. Old deployments do not magically rebuild with new values.

If deployment fails

Check in this order:

Does npm run build work locally?
Did the learner push the latest code to GitHub?
Is Vercel connected to the correct repo?
Did the build log mention a missing env variable?
Did the project rely on files ignored by Git?

Use this prompt:

Copy prompt

My Vercel deployment failed.

Localhost status:
[working / not working]

GitHub repo:
[link]

Build error:
[paste first red error]

Help me fix only the next step.

Common mistakes

Deploying a project that fails local build.
Forgetting required environment variables.
Sharing the preview URL before checking the page.
Importing the wrong repository.
Ignoring build logs and guessing.
Adding env variables after deploy but not redeploying.

Next step

Go to Supabase.