Cara Deploy Website Next.js ke Vercel dengan Gratis dan Cepat

Kamu sudah berhasil membangun proyek Next.js di lokal dan tampilannya sudah sesuai keinginan. Sekarang saatnya membuat website tersebut bisa diakses oleh semua orang melalui internet secara publik.

Vercel adalah platform yang paling direkomendasikan karena mereka adalah pencipta Next.js. Proses deploy di sini sangat lancar selama kamu mengikuti alur yang benar dan menjaga struktur kode tetap rapi.

Langkah pertama yang harus kamu lakukan adalah mengunggah kode ke GitHub. Pastikan semua perubahan terbaru sudah kamu push ke branch utama agar sistem Vercel bisa membaca pembaruan tersebut secara otomatis.

Setelah itu, masuk ke dashboard Vercel dan pilih menu untuk mengimpor repositori dari akun GitHub kamu. Vercel akan secara otomatis mendeteksi bahwa proyek tersebut menggunakan framework Next.js dan menyiapkan konfigurasi dasarnya.

Salah satu bagian paling krusial dalam proses ini adalah mengatur environment variables. Seringkali deploy gagal atau website mengalami error karena variabel di lingkungan lokal belum didaftarkan pada dashboard Vercel.

Berikut adalah contoh struktur variabel yang biasanya kamu butuhkan jika menggunakan layanan backend seperti Supabase:

NEXT_PUBLIC_SUPABASE_URL=https://xyz.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-secret-key

Penting bagi kamu untuk memisahkan antara kunci publik dan rahasia. Jangan pernah memasukkan SUPABASE_SERVICE_ROLE_KEY ke dalam komponen sisi klien karena hal ini bisa membahayakan keamanan data aplikasi kamu.

Jika kamu baru memulai dan belum memiliki proyek untuk dideploy, kamu bisa membaca cara membuat website dengan Next.js untuk pemula. Panduan tersebut akan membantumu memahami struktur dasar sebelum melangkah ke tahap publikasi.