Builder Toolkit · 06 / 11

Asas Vercel

Sambung repository, fahami build, bezakan preview dengan production, dan baca build log yang gagal.

Asas Vercel

Apa ini

Vercel mengambil code dalam repository GitHub anda, build-kannya, dan sajikan hasilnya pada satu URL public.

Satu idea utama

Vercel deploy apa yang ada di GitHub, bukan apa yang ada dalam laptop anda. Kalau anda tidak push, ia tidak wujud bagi Vercel.

Kenapa penting

Kerja di local tidak nampak oleh sesiapa. URL live ialah benda pertama yang anda boleh letak di depan orang, dan itulah bahan bukti dan portfolio.

Ia juga tempat sekumpulan error baharu muncul. Code yang jalan di local masih boleh gagal build, dan memahami sebabnya ialah beza antara berjaya ship dan tersekat.

Apa nak buat

Fahami alirannya

Terminal command

git push → Vercel detects the change → build runs → live URL updates

Swipe sideways if a command is long.

Setiap push ke branch main anda mencetuskan deployment baharu. Anda tidak perlu klik apa-apa selepas setup pertama.

Sambungkan project

Pergi ke vercel.com dan sign in dengan GitHub.
Pilih Add New, kemudian Project.
Import repository yang betul. Semak namanya betul-betul.
Biarkan setting framework yang dikesan.
Tambah environment variable hanya kalau project anda perlukannya.
Deploy, tunggu build selesai, dan buka URL.

Bezakan preview dengan production

Jenis	Datang dari	Untuk apa
Production	Branch `main` anda	Site sebenar. Ini URL yang anda share.
Preview	Branch lain atau pull request	Uji perubahan sebelum ia jadi live.

Pada awalnya anda hanya ada production. Share URL itu. URL preview berubah dan luput, jadi ia bukan benda yang elok diletak dalam CV.

Buat sekarang

Buka URL live anda pada telefon, bukan laptop sahaja. Masalah deployment dan masalah layout selalunya hanya muncul pada peranti sebenar.

Check sendiri

URL live saya terbuka dan tunjuk project saya.
Saya tahu branch mana hasilkan URL production.
Saya sudah push satu perubahan dan lihat deployment baharu muncul.
Saya tahu di mana build log dalam dashboard Vercel.

Baca build yang gagal dengan betul

Bila build gagal, ikut senarai ini ikut urutan. Ia selesaikan kebanyakan kegagalan tanpa teka:

Adakah npm run build berjaya pada mesin anda sendiri?
Adakah anda betul-betul sudah push commit terkini?
Adakah Vercel bersambung ke repository yang betul?
Adakah log sebut environment variable yang hilang?
Adakah project bergantung pada file yang .gitignore kecualikan?

Kemudian buka build log dan baca error merah pertama. Semua di bawahnya biasanya kesan daripada baris itu.

Kalau anda perlu bantuan AI, beri maklumat sebenar:

Copy

My Vercel deployment failed.

Does it build locally: [yes / no]
The first red error in the log:
[paste the error]

Explain what this means and give me only the next step to try.

Kalau build lulus tetapi halaman rosak

Itu bukan masalah build. Pergi ke Troubleshooting deployment.

Common mistakes

Deploy project yang tidak build di local, kemudian salahkan host.
Lupa push, kemudian hairan kenapa site live tiada kerja terkini anda.
Import repository yang salah dan debug project orang lain.
Baca baris terakhir build log dan bukan baris merah pertama.
Share URL preview seolah-olah ia kekal.
Tambah environment variable dan harap deployment sedia ada ambil nilainya, yang halaman seterusnya terangkan.

Next step

Project anda sudah live. Sekarang fahami kenapa ia boleh jalan di local tetapi rosak online: Environment Variables.