Cara Deploy Aplikasi ke Vercel: Panduan Lengkap untuk Developer Pemula

Cara deploy aplikasi ke Vercel adalah proses mempublikasikan aplikasi web — terutama yang dibangun dengan Next.js, React, Vue, atau framework modern lainnya — ke platform hosting Vercel yang mengotomasi build, deployment, dan distribusi global sehingga aplikasi bisa diakses publik dalam hitungan menit.

Ada momen yang hampir semua developer web pernah rasakan: aplikasi sudah jalan sempurna di localhost, tapi tidak tahu bagaimana cara membuat orang lain bisa mengaksesnya. Setup server sendiri terasa terlalu kompleks, konfigurasi Nginx dan SSL membutuhkan waktu berjam-jam, dan biaya VPS terasa tidak sepadan untuk proyek kecil atau portofolio.

Vercel hadir untuk memecahkan masalah ini — dan melakukannya dengan sangat baik. Cara deploy aplikasi ke Vercel bisa sesingkat tiga langkah: connect repository GitHub, klik deploy, selesai. Tidak ada konfigurasi server, tidak ada setup SSL manual, tidak ada worry tentang scaling.

Yang berubah signifikan di 2025: Vercel meluncurkan Fluid Compute — arsitektur baru yang mengubah cara serverless functions bekerja, membuat cold start hampir tidak terasa dan performa jauh lebih konsisten. Bersamaan dengan ini, Vercel AI SDK 3.0 membuat platform ini semakin menjadi pilihan utama untuk deployment aplikasi yang mengintegrasikan AI.

Sebelum masuk ke deployment, pastikan fondasi workflow development-mu sudah solid — CI/CD pipeline dengan GitHub Actions membahas bagaimana otomasi deployment bisa diintegrasikan untuk workflow yang lebih mature.

Cara Deploy Aplikasi ke Vercel: Memahami Apa yang Vercel Lakukan

Sebelum langkah pertama, memahami cara kerja Vercel akan membuat semua langkah berikutnya jauh lebih masuk akal.

Edge Network: Kenapa Vercel Cepat

Vercel mendistribusikan aplikasimu ke jaringan edge global — lebih dari 100 lokasi di seluruh dunia. Ketika pengguna di Jakarta mengakses aplikasimu, mereka tidak terhubung ke server di Amerika — tapi ke edge server yang paling dekat dengan lokasi mereka.

Hasilnya: latency yang sangat rendah dan performa yang konsisten tanpa kamu harus mengkonfigurasi CDN secara manual.

Build System yang Otomatis

Setiap kali ada perubahan di repository GitHub-mu, Vercel otomatis:

1. Mendeteksi framework yang digunakan (Next.js, React, Vue, Svelte, dll)
2. Menjalankan build command yang sesuai
3. Mengoptimasi output untuk production
4. Mendistribusikan ke edge network

Kamu tidak perlu menulis script build — Vercel mengenali framework populer secara otomatis dan tahu cara mem-build-nya dengan benar.

Preview Deployments: Fitur yang Sering Diabaikan

Setiap pull request di GitHub secara otomatis mendapat URL preview yang unik di Vercel. Ini berarti kamu bisa melihat perubahan di environment production-like sebelum merge ke branch utama — tanpa mempengaruhi aplikasi yang sudah live.

Untuk tim kecil, fitur ini menggantikan kebutuhan akan staging environment terpisah.

Persiapan Sebelum Deploy

Yang Dibutuhkan

Akun Vercel — daftar gratis di vercel.com. Tier Hobby gratis mencakup unlimited personal projects, custom domains, dan 100GB bandwidth per bulan — lebih dari cukup untuk portfolio dan proyek kecil hingga menengah.

Repository di GitHub, GitLab, atau Bitbucket — Vercel terhubung langsung ke Git provider. Kode yang tidak ada di repository tidak bisa di-deploy dengan cara yang benar.

Aplikasi yang sudah berjalan di lokal — pastikan npm run build atau equivalent-nya tidak menghasilkan error sebelum mencoba deploy. Error yang muncul di lokal akan muncul juga di Vercel.

Struktur Project yang Perlu Diperhatikan

Vercel mendeteksi framework berdasarkan file-file tertentu:

Kalau project-mu tidak terdeteksi secara otomatis, kamu bisa set framework secara manual di settings Vercel.

Deploy Pertama: Langkah Demi Langkah

Cara 1 — Lewat Dashboard Vercel (Termudah)

Langkah 1 — Import project: Login ke vercel.com, klik Add New → Project. Vercel akan menampilkan daftar repository dari GitHub account-mu. Cari dan pilih repository yang ingin di-deploy.

Langkah 2 — Konfigurasi build: Vercel otomatis mendeteksi framework dan mengisi build settings. Untuk sebagian besar project Next.js dan React, tidak ada yang perlu diubah. Yang perlu diperhatikan:

• Build Command: default npm run build atau next build
• Output Directory: default .next untuk Next.js, build untuk CRA, dist untuk Vite
• Install Command: default npm install

Langkah 3 — Environment variables: Kalau aplikasimu menggunakan environment variables (API keys, database URLs, dll), tambahkan di bagian ini sebelum deploy. Jangan commit .env file ke repository — masukkan langsung di Vercel dashboard.

NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://...
OPENAI_API_KEY=sk-...

Langkah 4 — Deploy: Klik Deploy. Vercel akan menjalankan build dan dalam 1–3 menit, aplikasimu sudah live di URL seperti nama-project.vercel.app.

Cara 2 — Lewat Vercel CLI (Untuk Developer)

CLI Vercel memberikan kontrol lebih dan sangat berguna untuk workflow yang lebih advanced.

bash

# Install Vercel CLI
npm install -g vercel

# Login ke akun Vercel
vercel login

# Deploy dari direktori project
cd nama-project
vercel

# Deploy langsung ke production (skip preview)
vercel --prod

Saat pertama kali menjalankan vercel di project baru, CLI akan menanyakan beberapa pertanyaan konfigurasi. Setelah itu, setiap vercel --prod langsung deploy ke production.

Konfigurasi Lanjutan yang Sering Dibutuhkan

Custom Domain

URL default nama-project.vercel.app sudah bisa digunakan, tapi untuk project serius kamu pasti ingin domain sendiri.

Di Vercel Dashboard → Project → Settings → Domains:

1. Tambahkan domain kamu (misalnya ngepush.com)
2. Vercel akan menampilkan DNS records yang perlu ditambahkan
3. Di DNS provider domain-mu (Cloudflare, Niagahoster, dll), tambahkan records tersebut
4. SSL otomatis di-setup oleh Vercel — tidak perlu konfigurasi manual

Propagasi DNS biasanya selesai dalam 10–60 menit.

Vercel.json: Konfigurasi Custom

File vercel.json di root project memungkinkan konfigurasi yang lebih detail:

json

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.backend.com/:path*"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/blog/:slug",
      "destination": "/articles/:slug",
      "permanent": true
    }
  ]
}

Rewrites sangat berguna untuk menyembunyikan URL API backend atau mengintegrasikan microservice tanpa CORS issues.

Serverless Functions di Vercel

Vercel mendukung serverless functions yang berjalan di edge — kode backend yang dieksekusi tanpa server yang selalu menyala.

javascript

// api/hello.js — otomatis jadi endpoint /api/hello
export default function handler(req, res) {
  const { name = 'World' } = req.query;
  res.status(200).json({ message: `Hello, ${name}!` });
}

Untuk Next.js, API routes di folder pages/api/ atau app/api/ otomatis menjadi serverless functions di Vercel.

Vercel vs Netlify vs Railway vs Render: Pilih yang Mana

Data Google Trends Indonesia menunjukkan keempat platform ini sedang naik bersama-sama. Ini perbandingan yang praktis:

Pilih Vercel untuk: Next.js apps, React frontends, JAMstack sites, aplikasi yang butuh edge performance tinggi.

Pilih Railway atau Render untuk: aplikasi yang butuh persistent server (WebSocket, background jobs), aplikasi dengan database yang perlu dikelola bersama backend, atau proyek Docker-based.

Minggu lalu, Bayu — mahasiswa tingkat akhir yang sedang membangun portfolio untuk melamar kerja — punya masalah yang familiar: semua proyeknya ada di localhost dan tidak bisa ditunjukkan ke recruiter. Dia sudah tunda deploy karena takut prosesnya rumit. Setelah mencoba Vercel untuk pertama kali, proyek Next.js-nya yang sudah dikerjakan tiga minggu bisa diakses publik dalam delapan menit — dari pertama login ke Vercel sampai aplikasi live dengan HTTPS. “Saya buang waktu dua minggu menunda sesuatu yang ternyata lebih cepat dari bikin mie instan,” katanya di Discord komunitas developer tempatnya aktif.

Tips Tambahan: Deploy ke Vercel yang Lebih Profesional

Gunakan branch untuk environment yang berbeda — set main branch untuk production dan develop untuk staging. Vercel bisa dikonfigurasi untuk deploy production hanya dari main, sementara branch lain mendapat preview URL.

Pantau build logs dengan teliti — setiap kali build gagal, Vercel menyimpan log lengkap yang menunjukkan persis di mana error terjadi. Baca dari bawah ke atas — error yang relevan biasanya ada di bagian akhir log.

Optimalkan environment variables — variabel dengan prefix NEXT_PUBLIC_ di Next.js akan ter-expose ke client-side JavaScript. Jangan gunakan prefix ini untuk secret keys atau credentials.

Manfaatkan Vercel Analytics — Vercel punya analytics bawaan yang menampilkan Core Web Vitals dan performance metrics per halaman. Gratis untuk tier Hobby dan sangat berguna untuk mengidentifikasi halaman yang perlu dioptimasi.

Gunakan .vercelignore — seperti .gitignore, file ini mencegah file atau folder tertentu di-upload ke Vercel. Berguna untuk mengecualikan file dokumentasi besar, test fixtures, atau asset yang tidak dibutuhkan di production.

Untuk memahami deployment dalam konteks DevOps yang lebih luas — termasuk containerization, CI/CD pipeline, dan infrastructure as code — kursus ini membahas seluruh workflow dari development hingga production operations: pelajari DevOps dan deployment modern secara lengkap →

Cara deploy aplikasi ke Vercel adalah salah satu skill yang paling cepat memberikan hasil nyata — dalam hitungan menit, proyek yang tadinya hanya bisa dilihat di localhost bisa diakses dari seluruh dunia dengan HTTPS dan performa yang dioptimasi secara otomatis. Untuk developer yang membangun portfolio atau meluncurkan produk, tidak ada alasan untuk menunda deployment lebih lama.

Langkah paling konkret hari ini: ambil satu project di lokal yang sudah jalan, push ke GitHub jika belum, buka vercel.com, dan deploy. Total waktu yang dibutuhkan untuk pertama kali tidak lebih dari 15 menit — dan setelah itu, setiap push ke GitHub akan otomatis ter-deploy tanpa langkah manual apapun.

FAQ

Apakah Vercel gratis untuk digunakan?

Tier Hobby Vercel sepenuhnya gratis untuk proyek personal — unlimited personal projects, custom domains, 100GB bandwidth, dan serverless functions sudah termasuk. Tier Pro diperlukan untuk proyek komersial, kolaborasi tim, atau yang butuh bandwidth lebih besar dan SLA yang lebih tinggi.

Bisakah deploy aplikasi backend (Express, Django, dll) ke Vercel?

Vercel dioptimasi untuk frontend dan serverless — bukan untuk persistent backend server. Aplikasi Express atau Django yang butuh server yang selalu menyala lebih tepat di-deploy ke Railway, Render, atau VPS. Tapi API sederhana yang bisa dikonversi ke serverless functions bisa berjalan di Vercel.

Apa yang terjadi jika melebihi limit free tier?

Vercel akan menampilkan warning dan dalam beberapa kasus membatasi traffic sampai billing cycle berikutnya — bukan langsung mematikan aplikasi. Untuk proyek yang mulai mendapat traffic signifikan, upgrade ke Pro plan atau optimasi penggunaan bandwidth yang ada.