Cara Deploy Aplikasi Next.js ke Vercel: Tutorial Buat Pemula Banget

Aplikasi kamu udah jadi di localhost. Berjalan lancar. Kamu pengen liat orang lain pakai.

Sekarang masalahnya: gimana cara bikin aplikasi itu bisa diakses dari internet?

Jawabannya: deploy ke Vercel.

Vercel itu platform yang dibuat sama tim Next.js. Deploy di sini semudah klik tombol. Free tier-nya cukup buat aplikasi kecil sampai menengah. Dan yang paling penting, integrasinya sama Next.js nyaris tanpa komplikasi.

Tutorial ini saya tulis buat kamu yang baru pertama kali deploy. Nggak ada jargon ribet. Ikuti aja langkah demi langkah.

---

Yang Kamu Butuhin Sebelum Mulai

Sebelum mulai, pastikan punya:

• Akun GitHub (gratis). Kalau belum punya, daftar dulu di github.com.
• Aplikasi Next.js yang udah jalan di komputer kamu. Bisa bikin pakai npx create-next-app.
• Git udah terinstall di komputer. Cek dengan ketik git --version di terminal.

Kalau tiga hal di atas udah ada, lanjut.

---

Langkah 1: Push Kode ke GitHub

Vercel baca kode kamu dari GitHub. Jadi langkah pertama adalah masukin kode kamu ke sana.

Buka terminal di folder project kamu. Kalau project kamu belum punya git, init dulu:

git init
git add .
git commit -m "initial commit"

Sekarang bikin repository baru di GitHub.

Screenshot reference: Buka github.com, klik tombol "New" berwarna hijau di kanan atas. Masukkan nama repository, misalnya "aplikasi-saya". Pilih "Public" atau "Private" terserah. Klik "Create repository".

Setelah repository dibuat, GitHub bakal kasih instruksi. Ikuti yang bagian "push an existing repository from the command line":

git remote add origin https://github.com/username-kamu/aplikasi-saya.git
git branch -M main
git push -u origin main

Ganti username-kamu dengan username GitHub kamu. Jangan copy-paste mentah-mentah ya.

Kalau berhasil, buka halaman repository kamu di GitHub. Kode kamu bakal muncul di sana.

---

Langkah 2: Bikin Akun Vercel

Buka vercel.com. Klik tombol "Sign Up" di pojok kanan atas.

Screenshot reference: Halaman signup Vercel. Ada beberapa pilihan: "Continue with GitHub", "Continue with GitLab", "Continue with Bitbucket". Pilih yang "Continue with GitHub".

Pilih login pakai GitHub. Ini cara paling gampang soalnya nanti Vercel langsung bisa akses repository kamu tanpa setup tambahan.

Authorize Vercel buat akses akun GitHub kamu. Kalau ditanya scope permissions, klik "Authorize Vercel".

Selesai. Akun Vercel kamu udah jadi.

---

Langkah 3: Import Project

Setelah login, kamu bakal masuk ke dashboard Vercel. Klik tombol "Add New" terus pilih "Project".

Screenshot reference: Dashboard Vercel. Tombol "Add New" di kanan atas, ada dropdown dengan pilihan "Project". Klik.

Vercel bakal nunjukin semua repository GitHub kamu. Cari repository yang tadi kamu push.

Kalau nggak muncul, klik "Adjust GitHub App Permissions" di bawah. Ini kasih Vercel akses ke repository yang belum terdeteksi.

Klik "Import" di repository yang mau kamu deploy.

---

Langkah 4: Konfigurasi Deploy

Di halaman import, Vercel bakal otomatis detect kalau ini project Next.js. Kamu biasanya nggak perlu ubah apa-apa di sini.

Screenshot reference: Halaman konfigurasi project. Ada field "Project Name", "Framework Preset" (otomatis terdeteksi "Next.js"), dan section "Environment Variables" di bawah.

Beberapa hal yang perlu kamu perhatikan:

Project Name: Bisa kamu ubah atau biarin default. Ini jadi bagian dari URL aplikasi kamu nanti.

Framework Preset: Harus otomatis kedetect "Next.js". Kalau nggak, pilih manual.

Root Directory: Kalau project kamu ada di root repository, biarin kosong. Kalau project kamu ada di subfolder (misalnya monorepo), klik "Edit" dan pilih folder yang benar.

Environment Variables: Kalau aplikasi kamu butuh API key atau variable lain (misalnya NEXT_PUBLIC_SUPABASE_URL), masukin di sini. Klik tombol "Add" buat nambahin satu per satu.

Ini penting dong. Kalau aplikasi kamu butuh database atau API key dan kamu lupa masukin environment variable-nya, aplikasi bakal crash pas jalan di Vercel.

---

Langkah 5: Deploy

Klik tombol "Deploy" berwarna biru di bawah.

Screenshot reference: Tombol "Deploy" besar di bawah halaman konfigurasi. Klik.

Vercel mulai kerja. Proses build biasanya 1 sampai 3 menit buat project kecil. Kamu bakal lihat log real-time di layar.

Screenshot reference: Layar deployment progress. Ada animasi loading, log build di bawah yang ngasih tau step yang lagi dijalanin ("Cloning github repository", "Running build command", dll).

Kalau berhasil, bakal muncul layar konfeti dan tombol "Visit" buat lihat aplikasi kamu yang udah live.

Screenshot reference: Layar "Congratulations!" dengan animasi confetti. Tombol "Visit" di kanan bawah.

Klik "Visit". Browser bakal buka aplikasi kamu di URL kayak aplikasi-saya.vercel.app.

Selamat. Aplikasi kamu udah online.

---

Langkah 6: Custom Domain (Opsional)

URL bawaan dari Vercel udah cukup buat testing. Tapi kalau kamu mau pakai domain sendiri (misalnya aplikasisaya.com), bisa banget.

Di dashboard Vercel, masuk ke project kamu. Klik tab "Settings" di atas, terus "Domains" di sidebar kiri.

Screenshot reference: Halaman Settings > Domains. Ada input field buat masukin domain, tombol "Add".

Masukin domain kamu. Vercel bakal kasih instruksi DNS yang perlu kamu setup di tempat kamu beli domain (Niagahoster, DomaiNesia, Cloudflare, atau mana pun).

Biasanya kamu perlu tambah record CNAME atau A record. Copy nilai yang Vercel kasih, paste di dashboard domain registrar kamu. Tunggu DNS propagate, biasanya 5 menit sampai beberapa jam.

Selesai.

---

Yang Sering Bikin Masalah

Deploy pertama kadang nggak mulus. Ini masalah yang paling sering saya jumpai pas ngajar:

Build error di Vercel padahal jalan di localhost. Biasanya karena ada dependency yang nggak masuk ke package.json. Coba jalankan npm install dari nol di folder baru buat test. Kalau ada package yang ketinggalan, install dan commit package.json yang baru.

Environment variable lupa. Aplikasi jalan di localhost soalnya .env.local ada di komputer kamu. Vercel nggak punya file itu. Masukin manual di Settings > Environment Variables, terus redeploy.

Gambar atau file statis nggak muncul. Pastikan file-file itu ada di folder public. Path di Next.js pakai /nama-file.jpg, bukan ./public/nama-file.jpg.

Database connection timeout. Kalau kamu pakai database lokal (PostgreSQL/MySQL yang jalan di komputer), itu nggak bisa diakses dari Vercel. Kamu butuh database yang hosted di cloud, kayak Supabase atau PlanetScale.

---

Update Aplikasi Setelah Deploy

Ini bagian yang paling enak dari pakai Vercel.

Kalau kamu mau update aplikasi, kamu nggak perlu deploy manual lagi. Cukup:

git add .
git commit -m "update fitur baru"
git push

Vercel otomatis detect ada push baru ke branch main, terus auto-deploy. Nggak perlu klik apa-apa.

Screenshot reference: Dashboard Vercel, ada entry deployment baru dengan status "Building". Setelah selesai, status berubah jadi "Ready" dengan tombol "Visit".

Tinggal tunggu 1-2 menit, versi baru aplikasi kamu udah live.

---

Biaya dan Limit Free Tier

Free tier Vercel cukup generous buat project hobi atau portfolio:

• 100GB bandwidth per bulan
• 100GB-hours serverless function execution
• Unlimited static deployments
• Automatic HTTPS (SSL certificate gratis)
• Preview deployment untuk setiap pull request

Kalau aplikasi kamu mulai dapet traffic tinggi, kamu mungkin perlu upgrade ke Pro plan ($20/bulan per anggota tim). Tapi buat mulai dan belajar, free tier udah lebih dari cukup.

Yang perlu diingat: free tier punya limit concurrent serverless function execution. Kalau tiba-tiba ada 1000 orang akses barengan, beberapa request mungkin dapet error. Nggak masalah buat aplikasi yang traffic-nya masih kecil.

---

Saran Terakhir

Deploy pertama itu selalu deg-degan. Waktu lihat aplikasi kamu live di internet buat pertama kali, rasanya puas banget.

Jangan takut salah. Kalau deploy gagal, Vercel nggak bakal ngapus apa-apa. Kamu bisa fix kode, push lagi, dan deploy ulang. Aman kok.

Dan ingat, URL Vercel itu publik. Siapa aja yang punya link bisa akses. Jadi pastikan nggak ada API key atau password yang ke-leak di kode kamu. Cek .gitignore dan pastikan file sensitif nggak ke-commit.

Selamat deploy.