Apa Itu Vercel? Kegunaan, Kelebihan Dan Cara Deploy Website

Selepas membina sebuah website pada komputer, anda masih perlu menerbitkannya ke internet supaya boleh diakses oleh orang lain. Proses menerbitkan website ini dikenali sebagai deployment.

Bagi website tradisional, deployment biasanya dilakukan menggunakan cPanel, File Manager atau FTP. Anda membeli hosting, memuat naik fail, menghubungkan domain dan mengurus pelbagai tetapan server secara manual.

Aplikasi web moden pula menggunakan aliran kerja yang berbeza. Kod lazimnya disimpan dalam platform seperti GitHub, kemudian dibina dan diterbitkan secara automatik setiap kali developer melakukan perubahan.

Salah satu platform yang memudahkan proses tersebut ialah Vercel.

Vercel sangat popular dalam kalangan developer yang menggunakan Next.js, tetapi platform ini juga boleh digunakan untuk pelbagai jenis website, aplikasi web, dashboard, projek AI dan frontend bagi sistem headless CMS.

Dalam artikel ini, anda akan mempelajari:

• Apa itu Vercel
• Bagaimana Vercel berfungsi
• Kegunaan utama Vercel
• Kelebihan dan kekurangannya
• Perbezaan Vercel dengan hosting tradisional
• Cara deploy website melalui GitHub
• Cara menyambungkan custom domain
• Masalah biasa ketika deployment
• Kesesuaian Vercel untuk WordPress dan website bisnes

Apa Itu Vercel?

Vercel ialah platform cloud yang digunakan untuk membina, menguji, deploy dan mengendalikan website serta aplikasi web moden.

Dalam bahasa mudah, Vercel mengambil kod projek anda, menjalankan proses build dan menerbitkannya ke internet.

Proses asasnya kelihatan seperti berikut:

1. Developer membina website pada komputer.
2. Kod projek disimpan dalam GitHub.
3. Repository GitHub disambungkan kepada Vercel.
4. Vercel mengambil kod daripada repository.
5. Vercel memasang dependency yang diperlukan.
6. Vercel menjalankan proses build.
7. Website diterbitkan pada URL sementara.
8. Custom domain boleh disambungkan.
9. Perubahan baharu boleh dideploy secara automatik.

Vercel bukan sekadar tempat menyimpan fail HTML. Platform ini turut menyediakan fungsi seperti:

• Preview Deployment
• Production Deployment
• Integrasi Git
• Custom domain
• HTTPS automatik
• Environment Variables
• Vercel Functions
• Log aplikasi
• Web Analytics
• Speed Insights
• Integrasi dengan database dan servis pihak ketiga

Menurut dokumentasi rasmi Vercel, setiap deployment yang berjaya akan menghasilkan URL unik yang boleh digunakan untuk menguji perubahan dalam persekitaran sebenar. Deployment boleh dilakukan melalui Git, Vercel CLI, Deploy Hooks atau API.

Analogi Mudah Untuk Memahami Vercel

Bayangkan anda sedang membina sebuah kedai digital.

• Kod website ialah reka bentuk dan struktur kedai.
• GitHub ialah tempat menyimpan pelan serta semua versi kedai.
• Vercel ialah kontraktor yang membina dan membuka kedai tersebut.
• Domain ialah alamat kedai.
• Deployment ialah proses menerbitkan versi kedai.
• Preview Deployment ialah unit contoh untuk pemeriksaan.
• Production Deployment ialah kedai sebenar yang dikunjungi pelanggan.

GitHub dan Vercel mempunyai fungsi yang berbeza.

GitHub digunakan terutamanya untuk menyimpan, mengurus dan merekod perubahan kod. Vercel pula mengambil kod tersebut dan menerbitkannya sebagai website atau aplikasi yang boleh diakses melalui internet.

Apakah Maksud Deploy Website?

Deploy website bermaksud menerbitkan projek daripada komputer developer kepada persekitaran yang boleh diakses oleh pengguna melalui internet.

Semasa proses pembangunan, website biasanya berjalan pada alamat lokal seperti:

http://localhost:3000

Alamat tersebut hanya boleh dibuka pada komputer yang menjalankan projek berkenaan.

Selepas website dideploy ke Vercel, anda akan menerima alamat seperti:

nama-projek.vercel.app

Alamat ini boleh dikongsi dan dibuka oleh orang lain.

Apabila website sudah bersedia untuk kegunaan rasmi, anda boleh menyambungkan custom domain seperti:

contoh.com

Vercel menyediakan persekitaran utama seperti:

Local

Persekitaran pembangunan pada komputer developer. Perubahan diuji sebelum kod dihantar ke repository.

Preview

Versi ujian yang dihasilkan daripada branch atau perubahan tertentu. Ia boleh diperiksa tanpa menjejaskan website sebenar.

Production

Versi rasmi yang dilihat oleh pengguna melalui domain utama.

Vercel juga menyokong custom environment untuk keperluan seperti staging, quality assurance atau pengujian khusus.

Adakah Vercel Hanya Untuk Next.js?

Tidak.

Vercel mempunyai hubungan rapat dengan Next.js kerana kedua-duanya dibangunkan oleh syarikat yang sama. Oleh itu, Next.js mempunyai integrasi yang sangat baik dengan Vercel.

Namun, Vercel tidak terhad kepada Next.js sahaja. Ia boleh digunakan untuk projek yang dibina menggunakan teknologi seperti:

• React
• Vue
• Nuxt
• Svelte
• SvelteKit
• Astro
• Vite
• Remix
• TanStack Start
• Projek HTML, CSS dan JavaScript statik

Tahap sokongan dan konfigurasi mungkin berbeza mengikut framework.

Sesetengah projek boleh dikesan dan dideploy secara automatik. Projek lain mungkin memerlukan anda menetapkan Build Command, Output Directory, Root Directory atau runtime secara manual.

Bagaimana Vercel Berfungsi?

Apabila sebuah repository disambungkan kepada Vercel, platform tersebut akan memeriksa struktur projek dan cuba mengenal pasti framework yang digunakan.

Sebagai contoh, jika projek menggunakan Next.js, Vercel biasanya boleh mengesan framework tersebut melalui fail package.json.

Seterusnya, Vercel akan:

1. Mengambil kod daripada repository.
2. Memasang dependency projek.
3. Menjalankan Build Command.
4. Menghasilkan fail statik atau fungsi bahagian server.
5. Menerbitkan hasil build.
6. Memberikan URL deployment.
7. Menghubungkan deployment kepada domain yang ditetapkan.

Apabila developer menghantar perubahan baharu ke GitHub, Vercel boleh menghasilkan deployment baharu secara automatik.

Integrasi GitHub rasmi Vercel menyediakan Preview Deployment URL dan mengemas kini custom domain secara automatik apabila Production Deployment diterbitkan.

Apakah Yang Dimaksudkan Dengan Build?

Build ialah proses menukar kod sumber kepada versi yang bersedia untuk diterbitkan.

Proses build mungkin melibatkan:

• Memasang dependency
• Menyusun kod TypeScript
• Memproses JavaScript
• Menghasilkan fail HTML
• Mengoptimumkan aset
• Menyediakan route aplikasi
• Menghasilkan fail statik
• Membina fungsi bahagian server

Bagi kebanyakan projek JavaScript, proses build boleh diuji menggunakan arahan seperti:

npm run build

Sekiranya build gagal pada komputer sendiri, kemungkinan besar build tersebut turut akan gagal di Vercel.

Sebab itu, developer perlu menguji projek secara lokal sebelum menjalankan deployment.

Apakah Preview Deployment?

Preview Deployment ialah versi sementara website yang digunakan untuk menguji perubahan sebelum diterbitkan kepada pengguna sebenar.

Sebagai contoh, anda mahu mengubah halaman harga tetapi tidak mahu perubahan tersebut terus muncul pada website production.

Anda boleh:

1. Mencipta branch baharu.
2. Melakukan perubahan pada branch tersebut.
3. Push kod ke GitHub.
4. Membuka URL preview yang dijana oleh Vercel.
5. Menguji perubahan.
6. Menggabungkan branch selepas semuanya diperiksa.

Preview Deployment berguna untuk:

• Semakan reka bentuk
• Pengujian fungsi
• Kelulusan klien
• Ujian paparan telefon
• Semakan kandungan
• Quality assurance
• Demonstrasi projek
• Pengesanan ralat

Setiap perubahan boleh diperiksa dalam persekitaran sebenar tanpa menjejaskan website production.

Apakah Production Deployment?

Production Deployment ialah versi rasmi website yang digunakan oleh pelawat.

Dalam kebanyakan projek, branch seperti main digunakan sebagai Production Branch.

Apabila kod dihantar atau digabungkan kepada branch tersebut, Vercel akan membina dan menerbitkan Production Deployment baharu.

Custom domain seperti contoh.com biasanya akan diarahkan kepada deployment production yang aktif.

Walaupun Vercel menyediakan pilihan untuk kembali kepada deployment terdahulu, proses rollback tidak sepatutnya menggantikan pengujian yang baik. Perubahan penting masih perlu disemak melalui Preview Deployment sebelum diterbitkan.

Kegunaan Utama Vercel

Vercel boleh digunakan untuk pelbagai projek. Namun, ia paling sesuai untuk website dan aplikasi yang mempunyai proses build serta aliran kerja berasaskan Git.

1. Hosting Website Statik

Website statik terdiri daripada fail seperti HTML, CSS, JavaScript dan imej.

Contohnya:

• Portfolio peribadi
• Website profil syarikat
• Landing page
• Microsite kempen
• Dokumentasi produk
• Resume interaktif
• Website acara
• Blog berasaskan Markdown

Website statik biasanya mudah dideploy dan boleh memberikan prestasi yang baik kerana kebanyakan kandungan telah siap dibina sebelum pengguna membuka halaman.

2. Menjalankan Aplikasi Next.js

Next.js boleh digunakan untuk membina aplikasi yang lebih kompleks seperti:

• Portal pelanggan
• Dashboard
• Platform pembelajaran
• Direktori perniagaan
• Kedai dalam talian custom
• Sistem keahlian
• Aplikasi SaaS
• Blog dinamik
• Portal dalaman organisasi

Vercel menyediakan integrasi yang rapat dengan Next.js, termasuk pengendalian deployment, rendering, caching dan fungsi bahagian server.

3. Membina Frontend Untuk Headless CMS

Dalam sistem headless CMS, bahagian pengurusan kandungan dipisahkan daripada frontend website.

Sebagai contoh:

• Editor menulis artikel dalam WordPress.
• WordPress menyediakan kandungan melalui API.
• Frontend dibina menggunakan Next.js.
• Frontend tersebut dideploy ke Vercel.

Selain WordPress, Vercel boleh digunakan bersama CMS seperti:

• Sanity
• Contentful
• Strapi
• Payload
• Storyblok
• Directus

Pendekatan headless memberikan lebih banyak kebebasan kepada developer, tetapi ia turut meningkatkan kos dan kerumitan penyelenggaraan.

4. Menjalankan Fungsi Bahagian Server

Vercel Functions membolehkan developer menjalankan kod bahagian server tanpa mengurus server tradisional.

Functions boleh digunakan untuk:

• Memproses borang
• Menghubungkan aplikasi kepada database
• Menghantar e-mel transaksi
• Mengambil data daripada API
• Menyemak identiti pengguna
• Memproses webhook
• Menjalankan logik pembayaran
• Menyediakan API endpoint
• Menghubungkan aplikasi kepada model AI

Functions boleh menyesuaikan penggunaan sumber mengikut permintaan, tetapi masih mempunyai had dari segi runtime, saiz, penggunaan memori dan seni bina. Vercel Functions juga tidak bertindak sebagai WebSocket server, jadi aplikasi masa nyata tertentu memerlukan penyelesaian pihak ketiga.

5. Membina Aplikasi AI

Vercel sesuai digunakan sebagai platform frontend dan deployment untuk projek AI seperti:

• Chatbot khidmat pelanggan
• Pembantu penulisan
• Alat analisis dokumen
• Penjana laporan
• Carian semantik
• Sistem soal jawab
• Dashboard AI
• Ejen automasi
• Interface untuk model bahasa

Vercel biasanya bukan tempat model AI utama dilatih.

Aplikasi yang dibina pada Vercel mungkin masih menggunakan API daripada penyedia model AI atau menggunakan model yang dihoskan pada infrastruktur lain.

Vercel berfungsi sebagai lapisan aplikasi yang mengendalikan interface, routing, API, streaming respons dan integrasi pengguna.

6. Membina Dashboard Dalaman

Vercel juga boleh digunakan untuk aplikasi dalaman SME seperti:

• Dashboard jualan
• Sistem laporan pemasaran
• Portal staf
• Kalkulator quotation
• Sistem semakan inventori
• Direktori pelanggan
• Alat analisis data
• Sistem permohonan dalaman

Namun, Vercel hanyalah satu komponen daripada keseluruhan sistem.

Anda mungkin masih memerlukan:

• Database
• Sistem authentication
• Object storage
• Penyedia e-mel
• Sistem pembayaran
• Backup
• Monitoring

7. Membina MVP Dengan Cepat

MVP atau minimum viable product ialah versi awal produk yang dibina untuk menguji idea.

Vercel sesuai untuk MVP kerana developer boleh:

• Deploy projek dengan cepat
• Berkongsi URL kepada pengguna
• Menguji perubahan melalui Preview Deployment
• Menghubungkan servis pihak ketiga
• Menerbitkan kemas kini dengan kerap
• Mendapatkan maklum balas sebelum membina sistem lebih besar

Walau bagaimanapun, tidak semua MVP perlu dibina menggunakan Vercel. Bahasa pengaturcaraan, keperluan backend, bajet dan kemahiran pasukan masih perlu dipertimbangkan.

Siapa Yang Sesuai Menggunakan Vercel?

Vercel sesuai untuk:

• Developer frontend
• Developer Next.js
• Pelajar teknologi
• Freelancer pembangunan web
• Agensi digital
• Startup
• Pasukan produk
• Pembangun aplikasi AI
• Organisasi yang menggunakan headless CMS
• Pemilik bisnes yang mempunyai developer
• Individu yang membina portfolio teknikal

Pemula juga boleh menggunakan Vercel, tetapi mereka perlu memahami sekurang-kurangnya konsep berikut:

• Repository
• Commit
• Branch
• Build
• Deployment
• Environment Variable
• Domain
• DNS

Vercel memudahkan pengurusan infrastruktur, tetapi ia bukan platform no-code sepenuhnya.

Siapa Yang Mungkin Tidak Memerlukan Vercel?

Vercel mungkin tidak sesuai sekiranya:

• Anda hanya mahu memasang WordPress biasa.
• Anda bergantung pada plugin dan tema WordPress.
• Anda mahu mengurus website melalui cPanel.
• Projek menggunakan aplikasi PHP tradisional.
• Anda memerlukan akses penuh kepada server.
• Anda tidak mahu menggunakan Git.
• Anda memerlukan hosting e-mel dalam pakej yang sama.
• Aplikasi memerlukan proses backend yang sangat panjang.
• Tiada sesiapa boleh menyelenggara kod selepas website dilancarkan.

Platform yang lebih moden tidak semestinya menghasilkan website yang lebih baik. Pilihan terbaik ialah platform yang menyelesaikan masalah sebenar dengan kos dan kerumitan yang munasabah.

Kelebihan Menggunakan Vercel

1. Proses Deployment Lebih Mudah

Untuk framework yang disokong, proses asasnya sangat ringkas:

1. Sambungkan akaun Git.
2. Pilih repository.
3. Semak konfigurasi.
4. Klik Deploy.

Vercel akan cuba mengesan framework, Build Command dan Output Directory secara automatik.

2. Auto Deployment Daripada Git

Setiap perubahan yang dihantar ke repository boleh mencetuskan deployment baharu.

Anda tidak perlu:

• Memampatkan folder website
• Membuka cPanel
• Menggunakan FTP
• Memadam fail lama secara manual
• Memuat naik fail baharu satu demi satu

Git turut memberikan rekod perubahan yang lebih teratur dan memudahkan pemulihan versi.

3. Preview Untuk Setiap Perubahan

Preview Deployment sangat berguna untuk freelancer, agensi dan pasukan produk.

Klien boleh memeriksa perubahan melalui URL sementara sebelum perubahan tersebut diterbitkan pada domain sebenar.

Ini membantu mengurangkan risiko:

• Reka bentuk rosak
• Pautan tidak berfungsi
• Kandungan salah
• Borang gagal dihantar
• Fungsi baharu menjejaskan pengguna

4. HTTPS Automatik

Deployment Vercel menggunakan HTTPS, termasuk apabila custom domain telah dikonfigurasikan dengan betul.

HTTPS membantu melindungi penghantaran data antara browser pengguna dengan website.

Walau bagaimanapun, HTTPS sahaja tidak menjadikan aplikasi selamat. Keselamatan kod, database, API, authentication dan permission masih perlu diuruskan dengan baik.

5. Mudah Menyambungkan Custom Domain

Setiap projek menerima alamat vercel.app.

Selepas website bersedia, anda boleh menambah custom domain melalui bahagian tetapan projek.

Vercel akan memberikan arahan tentang rekod DNS yang perlu ditambah atau diubah.

6. Tidak Perlu Mengurus Server Secara Tradisional

Bagi kebanyakan projek, anda tidak perlu:

• Menyediakan Apache atau Nginx
• Mengurus kemas kini sistem operasi
• Mengkonfigurasi SSL secara manual
• Membuka port server
• Menggunakan FTP
• Mengurus server fizikal

Developer boleh memberikan lebih banyak perhatian kepada pembangunan produk.

7. Sesuai Untuk Kerjasama Pasukan

Pasukan boleh menggunakan:

• Branch
• Pull request
• Preview Deployment
• Deployment comments
• Environment berasingan
• Log deployment
• Permission projek

Ciri tertentu mungkin bergantung pada pelan yang digunakan.

Kekurangan Dan Batasan Vercel

1. Bukan Pengganti Terus Kepada cPanel

Vercel tidak memberikan pengalaman pengurusan seperti shared hosting biasa.

Anda tidak menggunakan File Manager untuk memasang aplikasi PHP, mencipta database MySQL atau memasang WordPress secara terus.

Pengguna yang terbiasa dengan cPanel mungkin memerlukan masa untuk memahami aliran kerja berasaskan Git.

2. Pelan Hobby Bukan Untuk Projek Komersial

Pelan Hobby adalah percuma dan ditujukan kepada projek peribadi serta penggunaan bukan komersial.

Garis panduan penggunaan Vercel menyatakan bahawa penggunaan komersial memerlukan pelan Pro atau Enterprise. Penggunaan komersial termasuk deployment yang bertujuan memberikan keuntungan kewangan kepada pihak yang terlibat dalam penghasilan projek.

Oleh itu, jangan menggunakan pelan Hobby untuk:

• Website syarikat
• Projek klien berbayar
• Aplikasi SaaS berbayar
• Kedai dalam talian
• Website yang menyokong operasi komersial
• Projek yang dibina oleh pekerja atau konsultan berbayar

Pelan Hobby lebih sesuai untuk:

• Pembelajaran
• Eksperimen
• Portfolio peribadi
• Projek sumber terbuka
• Aplikasi bukan komersial berskala kecil

3. Kos Boleh Meningkat Mengikut Penggunaan

Vercel mempunyai pelan Hobby, Pro dan Enterprise.

Pada Julai 2026, pelan Pro dipaparkan bermula pada AS$20 sebulan, manakala caj tambahan boleh dikenakan berdasarkan penggunaan sumber tertentu.

Kos boleh meningkat apabila aplikasi mempunyai:

• Trafik tinggi
• Banyak permintaan dinamik
• Penggunaan Functions yang tinggi
• Pemindahan data yang besar
• Optimasi imej yang banyak
• Build yang kerap
• Ramai ahli pasukan
• Keperluan analytics atau monitoring tambahan

Harga, kuota dan struktur caj boleh berubah. Semak halaman harga rasmi sebelum membuat keputusan.

4. Tidak Semua Backend Sesuai

Vercel Functions sesuai untuk banyak operasi, tetapi ia bukan pengganti sempurna kepada server yang berjalan secara berterusan.

Aplikasi yang memerlukan perkara berikut mungkin memerlukan platform lain:

• Proses berpanjangan
• WebSocket server
• Pemprosesan video berat
• Kawalan sistem operasi
• Penyimpanan fail lokal berterusan
• Perkhidmatan backend yang sentiasa aktif
• Konfigurasi rangkaian khusus

5. Memerlukan Pengetahuan Asas Git

Vercel lebih mudah digunakan jika anda memahami:

• Cara mencipta repository
• Cara melakukan commit
• Cara push kod
• Cara menggunakan branch
• Cara membaca build log
• Cara mengurus Environment Variables

Tanpa pengetahuan ini, pengguna mungkin sukar mencari punca apabila deployment gagal.

6. Risiko Kebergantungan Kepada Platform

Semakin banyak fungsi khusus Vercel digunakan, semakin besar usaha yang mungkin diperlukan untuk memindahkan aplikasi ke platform lain.

Developer perlu memahami:

• Bahagian aplikasi yang menggunakan standard terbuka
• Bahagian yang bergantung pada Vercel
• Lokasi database dan fail
• Kaedah backup
• Struktur DNS
• Proses pemindahan sekiranya kos meningkat

Ini tidak bermaksud Vercel perlu dielakkan. Namun, seni bina aplikasi perlu didokumentasikan dengan baik.

Vercel vs Hosting Tradisional

Vercel tidak semestinya lebih baik daripada hosting tradisional. Kedua-duanya menyelesaikan jenis masalah yang berbeza.

Vercel vs Shared Hosting: Mana Lebih Sesuai?

Pilih Vercel jika:

• Anda membina aplikasi Next.js.
• Projek menggunakan framework JavaScript moden.
• Anda mahukan deployment automatik.
• Pasukan menggunakan GitHub.
• Anda memerlukan Preview Deployment.
• Anda sedang membina aplikasi AI.
• Anda menggunakan headless CMS.
• Anda mempunyai developer yang boleh mengurus kod.

Pilih shared hosting jika:

• Anda mahu memasang WordPress biasa.
• Anda bergantung pada tema dan plugin PHP.
• Anda mahukan cPanel.
• Anda memerlukan hosting e-mel asas.
• Anda tidak mahu mengurus Git.
• Website hanyalah blog atau laman syarikat biasa.
• Anda tidak memerlukan frontend custom.

Untuk kebanyakan blog dan website kandungan, WordPress tradisional yang dioptimumkan dengan baik masih lebih praktikal berbanding headless WordPress.

Persediaan Sebelum Deploy Website Ke Vercel

Sediakan perkara berikut:

• Akaun Vercel
• Akaun GitHub
• Repository projek
• Projek yang boleh dijalankan secara lokal
• Build Command yang betul
• Output Directory yang betul
• Environment Variables
• Custom domain jika diperlukan

Uji projek secara lokal:

npm install
npm run dev

Kemudian uji proses build:

npm run build

Jangan terus deploy projek yang masih mempunyai build error.

Cara Deploy Website Ke Vercel Menggunakan GitHub

Langkah 1: Sediakan Projek Website

Pastikan semua fail penting berada dalam folder projek.

Semak perkara berikut:

• Projek boleh dijalankan secara lokal.
• Build berjaya tanpa error.
• Dependency disenaraikan dalam package.json.
• Nama fail menggunakan huruf yang konsisten.
• Fail sensitif tidak dimasukkan ke repository.
• Fail .env telah dimasukkan ke .gitignore.
• Semua pautan utama berfungsi.

Langkah 2: Cipta Repository GitHub

Log masuk ke GitHub dan cipta repository baharu.

Untuk projek yang belum menggunakan Git, anda boleh menjalankan arahan berikut:

git init
git add .
git commit -m "Initial project"
git branch -M main
git remote add origin ALAMAT_REPOSITORY
git push -u origin main

Gantikan ALAMAT_REPOSITORY dengan URL repository sebenar.

Langkah 3: Daftar Atau Log Masuk Ke Vercel

Buka website Vercel dan daftar menggunakan akaun Git atau alamat e-mel.

Sekiranya anda menggunakan GitHub, semak permission yang diminta sebelum memberikan akses.

Anda boleh mengehadkan akses Vercel kepada repository tertentu sahaja.

Langkah 4: Import Repository

Dalam dashboard Vercel:

1. Klik Add New.
2. Pilih Project.
3. Sambungkan akaun GitHub.
4. Cari repository projek.
5. Klik Import.

Sekiranya repository tidak dipaparkan, semak permission GitHub atau akses organisasi.

Langkah 5: Semak Konfigurasi Projek

Sebelum deployment, periksa tetapan berikut.

Project Name

Nama projek dalam dashboard dan sebahagian daripada URL awal vercel.app.

Framework Preset

Framework yang dikenal pasti, seperti Next.js, Nuxt, Astro atau Vite.

Root Directory

Folder utama aplikasi. Tetapan ini penting jika satu repository mengandungi beberapa aplikasi.

Build Command

Arahan yang digunakan untuk membina projek, contohnya:

npm run build

Output Directory

Folder yang terhasil selepas proses build.

Jangan menukar tetapan ini secara rawak jika Vercel telah mengesan framework dengan betul.

Install Command

Arahan yang digunakan untuk memasang dependency. Vercel biasanya mengesannya melalui package manager dan lockfile projek.

Langkah 6: Tambah Environment Variables

Environment Variables digunakan untuk menyimpan nilai konfigurasi seperti:

• API key
• Database URL
• Authentication secret
• Token servis
• Alamat API
• Konfigurasi aplikasi

Contoh nama variable:

DATABASE_URL
OPENAI_API_KEY
AUTH_SECRET

Jangan menyimpan nilai rahsia terus dalam kod atau repository awam.

Vercel membolehkan Environment Variables ditetapkan untuk persekitaran berbeza, termasuk Preview dan Production. Preview Variables digunakan untuk branch bukan production, manakala Production Variables digunakan pada deployment rasmi.

Selepas menambah atau mengubah variable, jalankan deployment baharu.

Langkah 7: Klik Deploy

Klik butang Deploy.

Vercel akan:

1. Mengambil kod daripada repository.
2. Memasang dependency.
3. Menjalankan proses build.
4. Menerbitkan hasil build.
5. Menghasilkan URL deployment.

Jika proses berjaya, website boleh dibuka menggunakan alamat vercel.app.

Langkah 8: Uji Website

Jangan hanya memeriksa halaman utama.

Uji perkara berikut:

• Menu navigasi
• Semua halaman penting
• Paparan telefon
• Borang
• Login
• Pautan dalaman
• Imej
• Redirect
• API
• Sambungan database
• Metadata SEO
• Halaman 404

Jika terdapat masalah, periksa Build Logs dan Runtime Logs.

Langkah 9: Kemas Kini Website

Selepas projek disambungkan kepada GitHub, anda boleh menerbitkan perubahan dengan arahan berikut:

git add .
git commit -m "Update website"
git push

Push kepada branch biasa boleh menghasilkan Preview Deployment. Push atau merge kepada Production Branch pula boleh menghasilkan Production Deployment, bergantung pada konfigurasi projek.

Cara Deploy Menggunakan Vercel CLI

Selain integrasi Git, deployment boleh dilakukan melalui Vercel CLI.

Pasang Vercel CLI:

npm install -g vercel

Log masuk:

vercel login

Buka folder projek dan sambungkannya kepada projek Vercel:

vercel link

Untuk menghasilkan Preview Deployment:

vercel deploy

Untuk Production Deployment:

vercel deploy --prod

Dokumentasi rasmi turut mengesyorkan workflow yang merangkumi proses link projek, menarik Environment Variables, menguji secara lokal, deploy preview, memeriksa hasil dan akhirnya deploy ke production.

Cara Sambungkan Custom Domain Ke Vercel

Selepas deployment berjaya:

1. Buka projek dalam dashboard Vercel.
2. Pilih Settings.
3. Pilih Domains.
4. Klik Add Domain.
5. Masukkan nama domain.
6. Ikut arahan DNS yang diberikan.
7. Tunggu pengesahan.
8. Uji domain dan HTTPS.

Jika DNS dikendalikan melalui Cloudflare atau pendaftar domain, lakukan perubahan di platform berkenaan.

Berhati-hati supaya tidak memadam rekod berikut:

• MX
• SPF
• DKIM
• DMARC
• TXT verification
• Rekod subdomain lain

Rekod ini mungkin diperlukan untuk memastikan e-mel domain terus berfungsi.

Vercel tidak menggantikan penyedia e-mel. Anda masih memerlukan servis seperti Google Workspace, Microsoft 365, Zoho Mail atau penyedia e-mel lain.

Masalah Biasa Semasa Deploy Ke Vercel

Build Failed

Punca yang lazim termasuk:

• Build Command salah
• Dependency tidak disenaraikan
• Versi Node.js tidak sesuai
• TypeScript error
• Environment Variable tiada
• Fail penting tidak dihantar ke repository
• Root Directory salah

Jalankan npm run build pada komputer dan baiki error pertama yang dipaparkan.

Website Berfungsi Secara Lokal Tetapi Gagal Di Vercel

Antara puncanya:

• Perbezaan huruf besar dan kecil pada nama fail
• Secret hanya terdapat dalam fail .env lokal
• Kod menggunakan alamat localhost
• Dependency tidak disenaraikan
• Fail tertentu tidak dipush
• Runtime production berbeza daripada komputer
• Kod bergantung pada fail lokal

Halaman Menunjukkan Ralat 404

Semak:

• Struktur routing
• Nama fail halaman
• Output Directory
• Framework Preset
• Base path
• Rewrite configuration
• Sama ada halaman disertakan semasa build

Domain Belum Aktif

Kemungkinan puncanya:

• Rekod DNS salah
• Domain masih dikaitkan dengan projek lain
• Nameserver belum dikemas kini
• Rekod www belum ditambah
• Pengesahan belum selesai
• Perubahan DNS masih dalam proses penyebaran

Environment Variable Tidak Berfungsi

Semak:

• Ejaan nama variable
• Huruf besar dan kecil
• Environment yang dipilih
• Branch deployment
• Sama ada deployment baharu telah dilakukan
• Sama ada framework memerlukan prefix tertentu untuk variable frontend

Tips Keselamatan Menggunakan Vercel

Gunakan amalan berikut:

1. Jangan simpan API key dalam repository.
2. Jangan push fail .env.
3. Gunakan Environment Variables.
4. Hadkan akses repository.
5. Aktifkan pengesahan dua faktor.
6. Pisahkan database development dan production.
7. Jangan dedahkan data peribadi dalam log.
8. Semak permission integrasi GitHub.
9. Lindungi Preview Deployment yang mengandungi maklumat sulit.
10. Tetapkan notifikasi dan bajet penggunaan.
11. Putarkan semula secret yang telah terdedah.
12. Simpan dokumentasi tentang servis luaran yang digunakan.

Perlu diingat bahawa Environment Variables yang dihantar ke frontend masih boleh dilihat oleh pengguna. Jangan menjadikan secret sebagai variable public.

Tips SEO Untuk Website Yang Dihoskan Di Vercel

Vercel boleh menyediakan infrastruktur yang pantas, tetapi prestasi SEO masih bergantung pada cara website dibina.

Pastikan website mempunyai:

• Title tag yang unik
• Meta description
• Canonical URL
• Sitemap XML
• Fail robots.txt
• Struktur heading yang betul
• Internal link
• Alt text imej
• Structured data
• Halaman 404
• Redirect yang tepat
• URL yang mudah dibaca
• Kandungan yang boleh diakses enjin carian

Elakkan membina halaman penting yang hanya memaparkan kandungan selepas JavaScript kompleks dijalankan tanpa strategi rendering yang sesuai.

Selepas menyambungkan custom domain:

1. Tambah website ke Google Search Console.
2. Hantar sitemap.
3. Periksa status pengindeksan.
4. Semak canonical URL.
5. Pantau Core Web Vitals.
6. Periksa redirect antara www dan bukan www.
7. Pastikan domain preview tidak digunakan sebagai canonical.
8. Pastikan website staging tidak diindeks secara tidak sengaja.

Adakah Vercel Sesuai Untuk WordPress?

WordPress Tradisional

Dalam WordPress tradisional:

• WordPress dipasang pada hosting.
• Database berada pada server.
• Tema menghasilkan paparan website.
• Plugin menambah fungsi.
• Artikel diuruskan melalui wp-admin.

Vercel bukan pengganti langsung kepada hosting WordPress tradisional.

Anda tidak boleh memperlakukannya seperti shared hosting biasa yang mempunyai PHP, MySQL, File Manager dan pemasang WordPress.

Headless WordPress

Dalam sistem headless WordPress:

• WordPress digunakan sebagai CMS.
• Kandungan diberikan melalui API.
• Frontend dibina secara berasingan.
• Next.js boleh digunakan sebagai frontend.
• Frontend tersebut dideploy ke Vercel.

Pendekatan ini memberikan kebebasan pembangunan yang lebih besar, tetapi meningkatkan kerumitan.

Anda perlu mengurus:

• Hosting WordPress
• Frontend Vercel
• API
• Authentication
• Preview kandungan
• Cache
• Carian dalaman
• Sitemap
• Redirect
• Keserasian plugin
• Proses revalidation
• Dua persekitaran berasingan

Bila Headless WordPress Berbaloi?

Ia mungkin berbaloi jika:

• Anda memerlukan frontend yang sangat custom.
• Kandungan digunakan pada beberapa platform.
• Pasukan mempunyai developer tetap.
• Website menjadi sebahagian daripada aplikasi.
• Terdapat integrasi yang kompleks.
• Keperluan produk tidak dapat dipenuhi oleh tema biasa.

Bila Ia Tidak Berbaloi?

Ia mungkin tidak berbaloi jika:

• Website hanyalah blog kandungan.
• Anda bergantung pada banyak plugin.
• Bajet pembangunan terhad.
• Tiada developer tetap.
• Editor mahu semua fungsi tersedia dalam WordPress.
• Masalah prestasi boleh diselesaikan melalui hosting dan optimasi yang lebih baik.

Jangan menukar WordPress kepada sistem headless hanya kerana teknologi tersebut kelihatan lebih moden. Untuk kebanyakan publisher kecil dan SME, WordPress tradisional yang dioptimumkan dengan baik masih lebih mudah dan ekonomik.

Contoh Projek Yang Sesuai Dibina Dengan Vercel

Antara projek yang sesuai ialah:

• Portfolio developer
• Landing page startup
• Dashboard analitik
• Portal pelanggan
• Dokumentasi produk
• Direktori digital
• Kalkulator kewangan
• Sistem quotation
• Aplikasi AI
• Chatbot
• Blog headless
• Platform pembelajaran
• Alat dalaman SME
• MVP produk teknologi
• Website pemasaran berasaskan Next.js

Kesilapan Pemula Yang Perlu Dielakkan

1. Menganggap Vercel sama seperti cPanel.
2. Menggunakan pelan Hobby untuk projek komersial.
3. Tidak menguji build secara lokal.
4. Menyimpan API key dalam GitHub.
5. Mengubah Build Setting tanpa memahami fungsinya.
6. Mengabaikan Preview Deployment.
7. Memadam rekod e-mel ketika mengubah DNS.
8. Tidak memantau penggunaan dan kos.
9. Menganggap serverless bermaksud tiada had.
10. Menggunakan headless WordPress hanya kerana ia popular.
11. Menambah terlalu banyak servis sebelum memahami keperluan.
12. Tidak menyediakan backup atau pelan pemindahan.
13. Menggunakan localhost dalam Production Environment.
14. Tidak mendokumentasikan Environment Variables.
15. Memberikan akses repository yang terlalu luas.

Kesimpulan

Vercel ialah platform cloud yang memudahkan proses membina, menguji dan deploy website serta aplikasi web moden.

Kekuatan utamanya termasuk:

• Integrasi Git
• Auto deployment
• Preview bagi setiap perubahan
• Sokongan kukuh untuk Next.js
• Vercel Functions
• Custom domain
• HTTPS automatik
• Infrastruktur yang diuruskan
• Kesesuaian untuk aplikasi web dan AI

Namun, Vercel bukan penyelesaian terbaik untuk setiap website.

Ia bukan pengganti terus kepada cPanel dan tidak direka untuk pemasangan WordPress tradisional. Pelan Hobby juga tidak boleh dianggap sebagai hosting percuma untuk website komersial.

Gunakan Vercel jika anda membina frontend moden, dashboard, aplikasi SaaS, projek AI atau headless CMS.

Pilih hosting tradisional jika anda hanya memerlukan WordPress, e-mel domain dan sistem pengurusan yang mudah untuk pengguna bukan teknikal.

Keputusan yang baik tidak sepatutnya berdasarkan platform yang sedang popular. Pilihan perlu dibuat berdasarkan jenis projek, kemahiran pasukan, kos jangka panjang dan tahap kerumitan yang benar-benar diperlukan.

Tingkatkan Kemahiran Untuk Kerjaya Era AI

Memahami Vercel, GitHub, deployment dan pembangunan aplikasi web bukan sahaja berguna untuk developer.

Kemahiran digital ini semakin penting dalam bidang:

• Pembangunan perisian
• Cloud computing
• Data
• Keselamatan siber
• Automasi
• Reka bentuk produk
• Kejuruteraan AI
• Pemasaran digital
• Pengurusan teknologi

Ebook STEM Untuk Anak Muda Malaysia: Panduan Pilih Kerjaya, Course & Kerja Bergaji Tinggi Dalam Era AI membantu anda memahami:

• Bidang STEM yang mempunyai potensi
• Pilihan course dan laluan pembelajaran
• Kemahiran digital yang perlu dibina
• Cara memilih kerjaya berdasarkan minat dan kebolehan
• Peluang pekerjaan dalam era AI
• Kesilapan yang perlu dielakkan semasa memilih pengajian
• Cara merancang kemahiran untuk masa depan

Jangan belajar teknologi secara rawak tanpa matlamat yang jelas.

Dapatkan ebook STEM Untuk Anak Muda Malaysia dan bina laluan pengajian serta kerjaya yang lebih tersusun dalam dunia pekerjaan yang semakin dipengaruhi oleh AI.

Soalan Lazim Tentang Vercel