Toolstools / vercel

Vercel

Apa ini

Vercel deploy web app dan website dari GitHub repository.

Ia biasa digunakan untuk Next.js project.

Kenapa penting

Pelajar perlu lihat kerja mereka live, bukan hanya di localhost.

Live deployment juga senang untuk test dan share.

Apa nak buat

Core idea

Flow

GitHub push -> Vercel build -> live URL

Setiap push ke GitHub boleh trigger deployment baru.

Connect GitHub

Pergi ke vercel.com.
Sign in dengan GitHub.
Allow Vercel access ke repository pelajar.
Click Add New then Project.
Import GitHub repo yang betul.

Visual checkpoint:

Terminal command

Vercel Import Project
  Repository: project betul
  Framework Preset: detected
  Root Directory: default unless project nested
  Environment Variables: hanya kalau project perlu

Deploy

Keep detected framework settings.
Add environment variables hanya kalau project guna.
Click Deploy.
Tunggu build finish.
Buka live URL.
Test main page dan any forms/buttons.

Core features

Feature	Maksud	Beginner action
Project	Vercel connection ke satu GitHub repo	Satu class project = satu Vercel project.
Deployment	Satu built version website	Buka newest deployment selepas push.
Production	Main live version	Biasanya dari `main` branch.
Preview	Temporary version untuk branch/commit lain	Useful later, tak perlu untuk Vibe 101.
Build logs	Terminal output dari Vercel	Baca first red error.
Environment variables	Secret settings dalam Vercel	Add dekat Vercel, bukan GitHub.
Domains	Custom URLs	Guna later selepas default URL jalan.

Environment variables

Kalau local project guna .env.local, Vercel perlukan variables yang sama dalam project settings.

Example:

Setting

NEXT_PUBLIC_SUPABASE_URL=...
NEXT_PUBLIC_SUPABASE_ANON_KEY=...

Lepas add new environment variables, redeploy. Old deployment tak rebuild sendiri.

Kalau deployment fail

Check ikut order:

npm run build berjalan secara local?
Pelajar sudah push code terkini ke GitHub?
Vercel connect ke repo yang betul?
Build log mention missing env variable?
Project bergantung pada file yang Git ignore?

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.

Mistake biasa

Deploy project yang local build pun fail.
Lupa required environment variables.
Share preview URL sebelum check page.
Import repository yang salah.
Ignore build logs dan teka.
Add env variables selepas deploy tapi tak redeploy.

Next step

Pergi ke Supabase.