Deploy Vercel Gratis: Panduan Lengkap untuk Pemula 2026

Developer di Indonesia kini bisa menayangkan website tanpa mengeluarkan biaya hosting sepeser pun. Vercel, platform hosting yang dikenal sebagai rumah framework Next.js, menyediakan paket Hobby gratis selamanya. Paket ini bukan masa percobaan: tidak ada hitungan mundur 14 hari, tidak perlu kartu kredit, dan tidak ada perpindahan otomatis ke paket berbayar.

Prosesnya pun ringkas. Selama kode sudah tersimpan di GitHub, GitLab, atau Bitbucket, website bisa online dalam hitungan menit dan otomatis diperbarui setiap kali ada push baru. Panduan ini membahas langkah lengkapnya, mulai dari persiapan, deploy pertama, memasang domain sendiri, mengatur variabel rahasia, hingga cara mengatasi error yang paling sering dialami pemula. Satu hal penting perlu dicatat sejak awal: paket Hobby hanya boleh dipakai untuk proyek pribadi dan non-komersial.

Aspek	Paket Hobby (Gratis)	Paket Pro
Biaya	Rp0, tanpa kartu kredit	US$20 per anggota per bulan
Jenis penggunaan	Pribadi, non-komersial	Komersial diperbolehkan
Bandwidth	Sekitar 100 GB per bulan	Lebih besar, sisanya bayar sesuai pemakaian
Custom domain & SSL	Ya, SSL otomatis	Ya, SSL otomatis
Preview deployment	Ya	Ya
Cron job	Maksimal sekali per hari	Bisa per menit
Jika kuota habis	Fitur dijeda sampai kuota reset	Ditagih biaya tambahan
Anggota tim	1 orang	Banyak anggota

Apa Itu Vercel dan Mengapa Banyak Dipakai

Vercel adalah platform hosting berbasis cloud yang dirancang untuk website modern. Berbeda dengan hosting tradisional yang mengharuskan pengguna mengunggah file lewat FTP atau mengatur server sendiri, Vercel bekerja langsung dari repositori Git. Setiap perubahan kode yang dikirim ke repositori akan dibangun (build) dan dipublikasikan secara otomatis.

Website yang dihosting di Vercel didistribusikan lewat jaringan CDN global, sehingga halaman dimuat dari server terdekat dengan pengunjung. Selain halaman statis, Vercel juga mendukung serverless functions, yaitu potongan kode backend yang berjalan hanya ketika dipanggil. Fitur ini memungkinkan pembuatan API sederhana, form kontak, atau integrasi pihak ketiga tanpa perlu menyewa server.

Kombinasi kemudahan, kecepatan, dan paket gratis inilah yang membuat Vercel menjadi pilihan favorit untuk portofolio, blog pribadi, landing page proyek belajar, hingga prototipe aplikasi.

Framework yang Didukung

Vercel mendukung hampir semua framework frontend populer. Untuk framework berikut, pengaturan build biasanya terdeteksi otomatis tanpa perlu konfigurasi tambahan:

Next.js, yang dikembangkan langsung oleh tim Vercel.
React dengan Vite atau Create React App.
Vue dan Nuxt.
Svelte dan SvelteKit.
Astro, Remix, Gatsby, dan Angular.
Website HTML, CSS, dan JavaScript statis tanpa framework.

Website statis murni bahkan tidak memerlukan build command sama sekali. Cukup pastikan ada file index.html di folder utama.

Persiapan Sebelum Deploy

Sebelum mulai, siapkan beberapa hal berikut agar proses deploy berjalan mulus:

Akun GitHub (atau GitLab/Bitbucket) yang aktif.
Proyek website yang sudah berjalan normal di komputer lokal.
Repositori berisi proyek tersebut, boleh publik maupun privat.
File package.json dengan script build yang benar, khusus untuk proyek berbasis Node.js.
Daftar environment variable yang dibutuhkan, misalnya API key atau URL database.

Langkah yang sering dilewatkan pemula adalah menguji build di lokal. Jalankan npm run build di komputer sendiri terlebih dahulu. Jika build gagal di lokal, hampir pasti build juga akan gagal di Vercel. Pastikan pula folder node_modules dan file .env tercantum di .gitignore sehingga tidak ikut terunggah ke repositori.

Langkah 1: Daftar Akun Vercel

Buka vercel.com, lalu klik Sign Up. Pada pilihan jenis paket, pilih Hobby dan isi nama. Selanjutnya, pilih Continue with GitHub agar Vercel bisa langsung membaca daftar repositori. Izinkan akses ketika GitHub meminta konfirmasi.

Pada tahap izin, pengguna bisa memilih untuk memberi akses ke semua repositori atau hanya repositori tertentu. Untuk keamanan, pilih Only select repositories dan centang repositori yang memang akan di-deploy. Pengaturan ini bisa diubah kapan saja di halaman GitHub Applications.

Langkah 2: Import Repositori ke Vercel

Di dashboard Vercel, klik Add New lalu pilih Project. Daftar repositori akan muncul. Cari repositori yang diinginkan, lalu klik Import. Halaman konfigurasi proyek akan terbuka dengan beberapa kolom penting:

Project Name: nama proyek yang juga akan menjadi bagian dari URL .vercel.app.
Framework Preset: biasanya terisi otomatis. Untuk HTML statis, pilih Other.
Root Directory: ubah jika proyek berada di dalam subfolder, misalnya pada repositori monorepo.
Build Command: perintah build, misalnya npm run build. Biarkan default jika tidak ada kebutuhan khusus.
Output Directory: folder hasil build, misalnya dist untuk Vite atau build untuk Create React App.
Install Command: perintah instalasi dependensi seperti npm install, pnpm install, atau yarn.

Langkah 3: Atur Environment Variables

Jika aplikasi membutuhkan API key, token, atau URL database, buka bagian Environment Variables di halaman yang sama. Masukkan nama variabel dan nilainya, lalu klik Add. Jangan pernah menulis nilai rahasia langsung di dalam kode, terutama jika repositori bersifat publik.

Vercel membagi environment variable ke tiga lingkungan: Production, Preview, dan Development. Pengguna bisa memberi nilai berbeda untuk tiap lingkungan, misalnya database uji coba untuk Preview dan database asli untuk Production.

Perlu diingat, untuk framework frontend, variabel yang ingin dibaca di browser biasanya membutuhkan awalan khusus. Next.js memakai NEXT_PUBLIC_, sedangkan Vite memakai VITE_. Variabel tanpa awalan tersebut hanya bisa dibaca di sisi server. Setiap kali environment variable diubah, lakukan deploy ulang agar perubahan berlaku.

Langkah 4: Klik Deploy

Setelah semua kolom diperiksa, klik tombol Deploy. Vercel akan mengunduh kode, menginstal dependensi, menjalankan build, lalu menyebarkan hasilnya ke jaringan CDN. Untuk proyek kecil, proses ini umumnya selesai dalam satu hingga dua menit. Log build bisa dipantau secara langsung di layar.

Jika berhasil, layar akan menampilkan pratinjau website beserta alamat berakhiran .vercel.app. Website sudah bisa diakses publik dan dilengkapi HTTPS secara otomatis.

Cara Kerja Deploy Otomatis dan Preview Deployment

Salah satu keunggulan utama Vercel adalah integrasi Git yang otomatis. Setelah proyek terhubung, setiap push ke branch utama, biasanya main, akan memicu Production Deployment. Website produksi langsung diperbarui tanpa perlu membuka dashboard.

Sementara itu, setiap push ke branch lain atau setiap pull request akan menghasilkan Preview Deployment. Versi pratinjau ini memiliki URL unik tersendiri, sehingga perubahan bisa dicek dan dibagikan ke rekan kerja sebelum digabungkan ke branch utama. Jika sebuah rilis bermasalah, pengguna juga bisa kembali ke versi sebelumnya lewat menu Deployments dengan memilih deployment lama dan mempromosikannya ke produksi.

Alternatif: Deploy Lewat Terminal dengan Vercel CLI

Bagi yang tidak ingin menghubungkan GitHub, atau ingin deploy dari komputer secara langsung, Vercel menyediakan aplikasi baris perintah (CLI). Pastikan Node.js sudah terpasang, lalu jalankan perintah berikut di folder proyek:

npm i -g vercel
vercel login
vercel          # membuat preview deployment
vercel --prod   # deploy ke produksi

Saat pertama kali menjalankan vercel, CLI akan mengajukan beberapa pertanyaan, seperti nama proyek dan lokasi kode. Jawaban default umumnya sudah tepat. CLI juga menyediakan perintah vercel env pull untuk mengunduh environment variable ke file lokal, berguna saat bekerja di beberapa komputer.

Memasang Custom Domain

Alamat .vercel.app sudah cukup untuk uji coba, tetapi domain sendiri terlihat lebih profesional. Vercel memungkinkan pemasangan domain kustom gratis di paket Hobby. Caranya:

Buka proyek, lalu masuk ke Settings > Domains.
Ketik nama domain, misalnya namaku.id, lalu klik Add.
Vercel akan menampilkan record DNS yang perlu dipasang.
Masuk ke panel penyedia domain, lalu tambahkan record tersebut. Umumnya berupa record A untuk domain utama dan CNAME untuk subdomain www.
Tunggu propagasi DNS, biasanya beberapa menit hingga beberapa jam.

Setelah DNS terhubung, status domain di Vercel akan berubah menjadi Valid Configuration dan sertifikat SSL diterbitkan otomatis. Pengguna juga bisa mengatur pengalihan, misalnya dari www.namaku.id ke namaku.id, agar mesin pencari hanya mengindeks satu versi alamat.

Mengatur vercel.json untuk Kebutuhan Khusus

Sebagian besar proyek tidak memerlukan file konfigurasi tambahan. Namun untuk kebutuhan tertentu, file vercel.json di folder utama bisa dipakai untuk mengatur redirect, rewrite, header, atau cron job. Contoh yang paling sering dibutuhkan adalah aplikasi Single Page Application (SPA) berbasis React atau Vue yang memakai routing di sisi browser:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Konfigurasi ini memastikan semua alamat diarahkan ke index.html, sehingga halaman seperti /tentang tidak menampilkan error 404 ketika di-refresh. Framework seperti Next.js tidak memerlukan pengaturan ini karena routing sudah ditangani otomatis.

Error yang Sering Muncul dan Solusinya

Berikut beberapa masalah yang paling sering dialami saat deploy pertama, beserta cara mengatasinya:

Build gagal karena modul tidak ditemukan. Pastikan semua paket tercantum di package.json, bukan hanya terpasang secara global di komputer lokal. Periksa juga huruf besar dan kecil pada nama file. Server Vercel berbasis Linux dan membedakan Header.jsx dengan header.jsx, sementara Windows dan macOS tidak.
Halaman 404 saat refresh. Terjadi pada aplikasi SPA. Tambahkan konfigurasi rewrite di vercel.json seperti dijelaskan di atas.
Website tampil kosong. Biasanya Output Directory salah. Cek folder hasil build di lokal, lalu sesuaikan pengaturan di Settings > Build and Deployment.
API key tidak terbaca. Pastikan environment variable sudah ditambahkan di dashboard, memakai awalan yang benar untuk sisi browser, lalu lakukan deploy ulang.
Versi Node.js tidak cocok. Atur versi Node.js di pengaturan proyek atau lewat kolom engines pada package.json.
Peringatan dianggap error. Beberapa lingkungan CI menghentikan build ketika ada warning. Perbaiki peringatan yang muncul di log build, terutama dari linter.

Batasan Paket Hobby yang Wajib Diketahui

Paket Hobby tidak menagih biaya tambahan ketika kuota terlampaui. Sebagai gantinya, fitur yang melewati batas akan dijeda sampai periode kuota berikutnya. Dalam praktiknya, ini berarti website bisa tidak bisa diakses atau tidak bisa diperbarui untuk sementara waktu. Semua pengguna akan menerima notifikasi lewat email dan dashboard ketika pemakaian mendekati batas.

Untuk portofolio, blog pribadi, atau proyek belajar dengan beberapa ribu pengunjung per bulan, kuota ini jarang tersentuh. Masalah biasanya baru muncul pada website dengan banyak gambar berukuran besar, video, atau trafik yang tiba-tiba melonjak.

Batasan yang lebih krusial justru aturan penggunaan. Ketentuan Vercel menyebut paket Hobby hanya untuk penggunaan pribadi dan non-komersial. Toko online, aplikasi SaaS berbayar, website perusahaan, maupun proyek pesanan klien secara aturan harus memakai paket Pro. Angka kuota juga bisa berubah sewaktu-waktu, sehingga sebaiknya selalu memeriksa halaman resmi vercel.com/pricing sebelum menentukan paket.

Tips Agar Tetap Aman di Paket Gratis

Kompres gambar dan gunakan format modern seperti WebP atau AVIF untuk menghemat bandwidth.
Pilih halaman statis jika konten tidak perlu berubah untuk setiap pengunjung, karena halaman statis jauh lebih hemat sumber daya.
Hosting video di layanan terpisah, misalnya YouTube, lalu sematkan di halaman.
Pantau tab Usage di dashboard secara berkala untuk melihat pemakaian bandwidth dan fungsi.
Simpan secret di Environment Variables, jangan di repositori publik.
Hapus proyek uji coba yang sudah tidak dipakai agar dashboard tetap rapi.

Vercel Dibandingkan Alternatif Hosting Gratis Lain

Vercel bukan satu-satunya pilihan hosting gratis. Netlify menawarkan alur kerja serupa dengan integrasi Git dan form bawaan. Cloudflare Pages dikenal dengan jaringan CDN yang luas dan kuota bandwidth yang longgar. GitHub Pages cocok untuk website statis sederhana dan dokumentasi, tetapi tidak mendukung fungsi serverless.

Vercel unggul terutama untuk proyek Next.js karena dukungan fiturnya paling lengkap dan selalu terbaru. Untuk website statis murni tanpa fungsi backend, semua platform di atas sama-sama layak dipertimbangkan.

Pertanyaan yang Sering Diajukan

Apakah Vercel benar-benar gratis? Ya. Paket Hobby gratis tanpa batas waktu dan tanpa kartu kredit, selama dipakai untuk proyek pribadi non-komersial dan pemakaian berada dalam kuota.

Apakah repositori harus publik? Tidak. Vercel bisa men-deploy repositori privat di GitHub.

Bisakah memakai domain .id atau .com sendiri? Bisa. Custom domain gratis dipasang di paket Hobby, lengkap dengan SSL otomatis.

Apa yang terjadi jika kuota habis? Fitur yang melampaui kuota akan dijeda sampai periode berikutnya. Tidak ada tagihan otomatis di paket Hobby.

Bisakah Vercel menjalankan backend seperti PHP atau Laravel? Vercel dirancang untuk frontend modern dan fungsi serverless berbasis Node.js, Python, Go, atau Ruby. Aplikasi PHP tradisional seperti Laravel lebih cocok dihosting di VPS atau shared hosting.

Kesimpulan

Vercel menjadi salah satu cara tercepat untuk menayangkan website secara gratis. Alurnya sederhana: daftar dengan GitHub, import repositori, periksa pengaturan build, lalu klik Deploy. Setelah itu, setiap perubahan kode akan dipublikasikan otomatis, lengkap dengan preview untuk setiap branch dan SSL gratis untuk domain sendiri.

Selama proyeknya bersifat pribadi dan non-komersial, paket Hobby sudah lebih dari cukup untuk memulai. Ketika proyek berkembang menjadi bisnis atau mulai menghasilkan pendapatan, saatnya beralih ke paket Pro agar tetap sesuai aturan dan mendapat kuota yang lebih besar.

Deploy Website ke Vercel Kini Cukup Lima Menit, Ini Langkah Gratisnya