Deployment ke Vercel

Kenapa Vercel?

Vercel dibuat oleh tim yang sama dengan Next.js, jadi dukungannya paling mulus: Server Component, ISR, middleware edge, dan image optimization semuanya jalan tanpa konfigurasi tambahan.

Langkah deploy

1. Push project ke GitHub.
2. Buka vercel.com, login dengan GitHub.
3. Klik Add New Project, pilih repo-mu.
4. Isi Environment Variables (DATABASE_URL, API_SECRET, dan lainnya).
5. Klik Deploy. Tunggu 1-3 menit.

Setiap push ke branch utama otomatis memicu deploy baru. Push ke branch lain menghasilkan preview deployment dengan URL unik, cocok untuk review sebelum merge.

Environment variable di Vercel

Tambahkan env di dashboard: Project Settings, Environment Variables. Bedakan nilainya untuk Production, Preview, dan Development. Ingat: variabel NEXT_PUBLIC_* butuh redeploy kalau diubah.

Custom domain

Di dashboard project, buka Settings, Domains, tambahkan domain-mu (misal tokoku.id). Vercel memberi instruksi DNS yang harus dipasang di penyedia domain. SSL otomatis aktif.

Cek sebelum deploy

Jalankan ini secara lokal dulu. Kalau gagal di sini, deploy juga akan gagal:

npm run build

Perintah ini menjalankan typecheck, lint, dan membangun semua halaman. Error yang sering muncul: TypeScript error yang diabaikan saat dev, atau halaman yang memakai API browser saat prerender.

Kesalahan umum pemula

• Tidak menjalankan npm run build secara lokal dulu. Error TypeScript yang lolos di dev akan menggagalkan deploy. Biasakan build lokal sebelum push.
• Lupa isi environment variable di dashboard Vercel. Aplikasi jalan tapi error undefined di mana-mana karena env kosong.
• Commit node_modules atau .env.local. Memperlambat deploy dan membocorkan secret. Pastikan .gitignore benar.

Latihan singkat

1. Deploy project latihamu ke Vercel mengikuti langkah di modul ini sampai live.
2. Tambahkan satu env variable di dashboard Vercel, redeploy, dan verifikasi nilainya terbaca di production.

Rangkuman

• Vercel adalah platform paling mulus untuk Next.js: push ke GitHub otomatis deploy.
• Isi environment variable di dashboard untuk Production, Preview, dan Development.
• Custom domain mudah ditambah dengan SSL otomatis.
• Selalu jalankan npm run build lokal sebelum push untuk menangkap error lebih awal.

Catatan teknis: Jangan menaruh secret di kode atau commit .env.local. Kalau secret tidak sengaja ter-commit, anggap sudah bocor: segera rotasi (ganti) secret tersebut di semua layanan, bukan cuma menghapus commit-nya karena riwayat Git tetap menyimpan.