Deploy Next.js ke Vercel
Saatnya pamerkan karyamu! Pelajari langkah-langkah mudah untuk mendeploy aplikasi Next.js Anda ke Vercel, platform hosting yang dioptimalkan untuk Next.js, langsung dari repositori GitHub Anda.
Aplikasi Next.js-mu Siap "Go Public": Deploy Gampang ke Vercel!
Udah ngebangun aplikasi Next.js yang keren, lengkap dengan halaman, komponen, data, styling, dan mungkin API Routes sendiri? Luar biasa! Sekarang, pasti kamu pengen dong aplikasi ini gak cuma jalan di localhost:3000
komputermu aja, tapi juga bisa diakses sama siapa aja di seluruh dunia lewat internet.
Nah, proses "ngirim" aplikasi kita dari komputer lokal ke server biar bisa online ini namanya Deployment. Dan buat aplikasi Next.js, salah satu platform hosting yang paling gampang, paling cepet, dan paling direkomendasiin adalah Vercel.
Kenapa Deploy ke Vercel?
- Dibikin oleh Tim yang Sama dengan Next.js: Vercel (vercel.com) itu perusahaan yang juga ngebikin Next.js! Jadi, platform mereka dioptimasi banget buat ngejalanin aplikasi Next.js. Semua fitur Next.js (SSR, SSG, ISR, API Routes, Image Optimization, dll.) bakal jalan dengan mulus di Vercel.
- Integrasi Super Mulus dengan GitHub (dan GitLab/Bitbucket): Kamu bisa nyambungin repositori GitHub-mu ke Vercel. Setiap kali kamu nge-
push
perubahan ke branch tertentu (misal,main
), Vercel bisa otomatis nge-build dan nge-deploy ulang aplikasimu. Ini namanya Continuous Deployment (CD). Praktis banget! - Gratis buat Proyek Hobi & Personal: Vercel punya paket gratis ("Hobby") yang udah lebih dari cukup buat nge-host proyek-proyek pribadimu atau portofolio.
- Cepat dan Global (CDN): Aplikasi yang di-deploy di Vercel otomatis disajiin lewat jaringan server global (CDN - Content Delivery Network), jadi bisa diakses cepet dari mana aja.
- Banyak Fitur Keren Lain: Preview deployments buat tiap Pull Request, custom domain, analitik, serverless functions, dll.
Langkah-Langkah Deploy Next.js ke Vercel
Prosesnya bener-bener gampang, apalagi kalau kodemu udah ada di GitHub.
Prasyarat:
- Akun GitHub: Pastiin kamu udah punya akun GitHub dan proyek Next.js-mu udah di-push ke salah satu repositori di sana. (Review lagi panduan Git & GitHub kita kalau lupa caranya!).
- Akun Vercel: Kalau belum punya, daftar dulu di vercel.com. Kamu bisa daftar pake akun GitHub-mu biar lebih gampang.
Langkah Deployment:
-
Login ke Dashboard Vercel: Buka vercel.com dan login pake akunmu.
-
Impor Proyek dari Git Repository:
- Di dashboard Vercel-mu, cari tombol kayak
Add New...
atauImport Project
atauCreate a New Project
. - Pilih opsi
Import Git Repository
. Vercel bakal minta izin buat ngakses akun GitHub-mu (kalau belum pernah). Izinkan aja. - Vercel bakal nampilin daftar repositori GitHub-mu. Cari dan pilih repositori proyek Next.js yang mau kamu deploy (misalnya,
toko-kue-nextjs
kita). KlikImport
.
- Di dashboard Vercel-mu, cari tombol kayak
-
Konfigurasi Proyek (Biasanya Udah Otomatis Bener!):
- Setelah kamu impor, Vercel biasanya udah pinter ngedeteksi kalau itu proyek Next.js. Sebagian besar settingan default-nya udah pas.
- Beberapa hal yang mungkin perlu kamu perhatiin (tapi seringnya default udah oke):
- Framework Preset: Harus otomatis kepilih
Next.js
. - Root Directory: Kalau kodemu ada di root repositori Git, biarin kosong atau
./
. Kalau ada di subfolder, sesuaikan. (Biasanya udah bener). - Build and Output Settings: Perintah build (
next build
) dan output directory (.next
) biasanya juga udah otomatis bener. - Environment Variables (Variabel Lingkungan): Kalau aplikasimu butuh API Key rahasia atau konfigurasi lain yang gak mau kamu taro di kode, kamu bisa nambahinnya di sini. Misalnya, kalau Toko Kue kita nanti pake API Key buat payment gateway beneran, API Key-nya dimasukin di sini. Variabel ini bakal bisa diakses di kodemu lewat
process.env.NAMA_VARIABEL
.
- Framework Preset: Harus otomatis kepilih
-
Klik Tombol
Deploy
:- Kalau semua settingan udah keliatan oke, tinggal klik tombol
Deploy
! - Vercel bakal mulai proses build (ngejalanin
npm run build
atauyarn build
di server mereka) dan deployment. Kamu bisa liat log prosesnya secara real-time. Ini mungkin butuh beberapa menit, tergantung ukuran proyekmu.
- Kalau semua settingan udah keliatan oke, tinggal klik tombol
-
Selamat! Aplikasimu Udah Online!
- Kalau proses deploy berhasil, Vercel bakal ngasih kamu URL unik buat aplikasimu yang udah live (biasanya formatnya
nama-proyekmu-xxxx.vercel.app
). - Klik URL itu, dan kamu bakal liat aplikasi Next.js-mu jalan di internet! Bagikan ke temen-temenmu!
- Kalau proses deploy berhasil, Vercel bakal ngasih kamu URL unik buat aplikasimu yang udah live (biasanya formatnya
Continuous Deployment: Update Otomatis dari GitHub!
Salah satu hal paling keren dari Vercel adalah integrasi Git-nya. Secara default:
- Setiap kali kamu nge-
push
commit baru ke branch utama repositori GitHub-mu (misal, branchmain
), Vercel bakal otomatis ngedeteksi perubahan itu, nge-build ulang, dan nge-deploy versi terbarunya. Gak perlu lagi deploy manual! - Setiap kali kamu bikin Pull Request di GitHub, Vercel bisa otomatis nge-build dan nge-deploy "versi preview" dari PR itu di URL unik. Jadi, kamu dan timmu bisa ngetes perubahan PR itu di lingkungan live sebelum di-merge ke
main
. Super ngebantu buat code review.
(Opsional) Custom Domain
Kalau kamu punya nama domain sendiri (misal, tokokuebudi.com
), kamu bisa dengan gampang nyambunginnya ke aplikasi Vercel-mu. Ada di bagian "Domains" di setting proyek Vercel-mu. Ikutin aja petunjuknya buat ngatur DNS record-nya.
Troubleshooting Deployment
Kadang, proses deployment bisa gagal. Beberapa penyebab umum:
- Error pas proses build: Mungkin ada error di kodemu yang gak ketauan pas development lokal, atau ada masalah konfigurasi. Cek log build di Vercel buat liat pesan errornya.
- Masalah dependensi: Pastiin semua dependensi di
package.json
-mu udah bener dan kompatibel. - Environment Variables kurang: Kalau aplikasimu butuh variabel lingkungan tertentu buat jalan dan kamu lupa ngesetnya di Vercel.
- Batasan Versi Node.js: Vercel pake versi Node.js tertentu. Pastiin proyekmu kompatibel (biasanya Next.js ngikutin versi LTS Node.js).
Kalau ada masalah, log build di Vercel itu temen baikmu. Dokumentasi Vercel dan Next.js juga punya banyak info soal troubleshooting.
Deploy aplikasi Next.js ke Vercel itu bener-bener salah satu pengalaman paling memuaskan buat developer Next.js. Prosesnya simpel, cepet, dan banyak fiturnya gratis!
Dengan ini, kamu gak cuma bisa bikin aplikasi keren di komputermu, tapi juga bisa "mejeng"-innya ke seluruh dunia. Ini langkah penting buat ngebangun portofolio dan nge-share hasil karyamu.
Sekarang, Toko Kue Online kita (atau proyek Next.js apa pun yang kamu bikin) udah bisa dikunjungi siapa aja!