Cara Deploy React ke Vercel

Vercel paling dikenal sebagai rumahnya Next.js, tapi aplikasi React biasa — Vite atau Create React App — juga jalan mulus di sana, dan gratis untuk project pribadi.

Ada satu langkah yang hampir selalu terlewat dan baru terasa sehari kemudian: aturan rewrite supaya halaman tidak 404 saat di-refresh. Panduan ini menaruhnya sebagai langkah wajib.

Yang perlu disiapkan

• Node.js 20 atau lebih baru — cek dengan node -v.
• Akun Vercel, paket Hobby gratis cukup.
• Project React yang jalan dengan npm run dev atau npm start.
• Repositori Git.

Langkah 1: Kenali build tool-mu

Vercel biasanya mendeteksi keduanya otomatis lewat framework preset. Kamu jarang perlu mengisi sendiri — tapi kalau hasil deploy-nya kosong, di sinilah tempat memeriksanya.

Langkah 2: Buat vercel.json

Inilah langkah yang menentukan. Bikin vercel.json di root project:

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

Tanpa ini, kamu akan menemui gejala klasik: navigasi antar halaman lancar, tapi begitu di-refresh di /tentang muncul 404 — dan siapa pun yang membuka tautan langsung ke halaman dalam juga kena.

Sebabnya, React Router bekerja di sisi browser. Saat halaman di-refresh, browser meminta /tentang ke server, dan server mencari berkas bernama tentang yang tidak pernah ada.

Langkah 3: Deploy

1. Push project-mu ke GitHub, GitLab, atau Bitbucket.
2. Buka vercel.com/new, pilih repositorinya.
3. Periksa Framework Preset — harus terdeteksi Vite atau Create React App.
4. Klik Deploy.

Satu-dua menit kemudian situsmu live di alamat .vercel.app. Sejak sekarang, setiap push ke branch utama jadi deploy produksi, dan setiap pull request dapat URL preview sendiri.

Langkah 4: Environment variable

Daftarkan di Settings lalu Environment Variables. Prefiksnya berbeda antara Vite dan CRA:

Vercel memisahkan nilai untuk Production, Preview, dan Development. Manfaatkan itu untuk mengarahkan preview ke API uji, bukan ke produksi.

Variabel dibaca saat build, jadi setelah menambahkan yang baru kamu harus men-deploy ulang lewat Deployments lalu Redeploy.

Langkah 5: Cache header untuk aset

Vite dan CRA sama-sama menyisipkan hash ke nama berkas hasil build — index-a1b2c3.js. Karena namanya berubah tiap kali isinya berubah, aset itu aman di-cache selamanya:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ],
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Jangan pasang cache panjang untuk index.html — berkas itu namanya tidak pernah berubah, dan pengunjung akan tersangkut di versi lama.

Langkah 6: Pasang domain sendiri

Buka Settings lalu Domains, masukkan domainmu, dan ikuti record DNS yang ditampilkan. Sertifikat SSL diterbitkan otomatis setelah terverifikasi.

Detail DNS lengkapnya ada di panduan custom domain dan SSL.

Masalah yang sering muncul

404 saat refresh

Berkas vercel.json belum ada, tidak ter-commit, atau kamu memakai redirects alih-alih rewrites. Cek ketiganya berurutan.

Halaman putih

Buka DevTools lalu Console. Kalau penuh 404 untuk berkas .js, output directory-nya salah — dist untuk Vite, build untuk CRA. Periksa di Settings lalu Build & Development Settings.

Build gagal karena peringatan

Khas Create React App:

Treating warnings as errors because process.env.CI = true

Perbaiki peringatannya — biasanya variabel tidak terpakai atau dependensi hook yang kurang. Kalau memang mendesak, tambahkan environment variable CI bernilai false, tapi anggap itu utang, bukan solusi.

Build gagal padahal jalan di lokal

Kapitalisasi nama berkas. Server build memakai Linux yang membedakan huruf besar-kecil, laptopmu tidak. Periksa semua import-mu.

Aplikasi jalan, tapi API-nya kena CORS

Ini harus diperbaiki di server API, bukan di frontend. Aplikasi React murni di Vercel tidak punya sisi server untuk dijadikan perantara — kalau kamu tidak bisa mengubah API-nya, kamu butuh Serverless Function, dan untuk itu lebih masuk akal pindah ke Next.js.

Vercel atau Netlify untuk React?

Untuk aplikasi React biasa, keduanya sama-sama layak dan sama-sama gratis. Perbedaannya kecil:

Baris terakhir itu yang paling sering menentukan. Kalau situsmu menghasilkan pendapatan, paket Hobby Vercel tidak boleh dipakai. Perbandingan lengkapnya ada di Vercel vs Netlify.

Ringkasan

Kalau aplikasimu mulai butuh sisi server — menyembunyikan API key, mengirim email, memanggil database — itu tandanya waktunya pindah ke Next.js. Lihat cara deploy Next.js ke Vercel. Untuk gambaran menyeluruh, mulai dari panduan lengkap deploy website.