Menghubungkan Database Supabase ke Tampilan Cantik yang Dibuat dengan v0
makedream6 Mei 2026
0
Computing/Software
Comments (0)
Log in to leave a comment
No posts yet
makedreammakedreamLog in to leave a comment
No posts yet
v0 dari Vercel dapat menggambar tampilan Next.js yang keren dalam sekejap, tetapi jika Anda berhenti di situ, itu hanyalah sebuah cangkang yang tidak berguna. Begitu Anda menekan tombol refresh, data yang dimasukkan oleh pengguna akan hilang tanpa bekas. Untuk membuat layanan yang benar-benar berfungsi, Anda memerlukan database untuk menyimpan data.
Tepikan kebutuhan untuk menyewa developer dan menghabiskan jutaan won. Berikut adalah langkah-langkah untuk membuang mock data dari v0 dan menghubungkan Supabase secara mandiri untuk menyelesaikan backend yang berfungsi.
Di dalam kode yang dibuat oleh v0, biasanya terdapat mock data dalam bentuk const mockData = [...]. Memahami struktur data ini adalah langkah pertama. Anda harus memindahkan informasi yang ditampilkan di layar dan kolom yang dimasukkan oleh pengguna langsung ke dalam tabel database.
Untuk mencegah data menjadi kacau dan nilai yang salah tersimpan, Anda harus mendefinisikan tipe data dengan jelas. Bahkan jika Anda tidak tahu SQL, Anda dapat mendesain tabel hanya dengan mengetahui lima aturan berikut.
uuid PostgreSQL dan atur nilai default ke gen_random_uuid() agar string unik dibuat secara otomatis.text, lalu aktifkan pengaturan UNIQUE untuk mencegah pendaftaran ganda dan NOT NULL agar nilai kosong tidak dapat dimasukkan.numeric.text, tetapi batasi agar hanya nilai yang ditentukan seperti menunggu atau selesai yang dapat masuk.timestamptz di mana informasi zona waktu juga disimpan, dan masukkan now() pada nilai default agar waktu saat data masuk dapat diinput.Supabase membantu Anda membuat database di browser web hanya dengan beberapa klik mouse tanpa perlu membangun infrastruktur server yang rumit.
messages atau users, lalu tambahkan kolom yang diperlukan sesuai dengan standar pemetaan di atas.Setelah membuat database, Anda harus membuka jalur komunikasi antara folder proyek Next.js Anda dan Supabase. Pada saat ini, jika kunci rahasia admin database bocor ke tempat umum seperti GitHub, seluruh layanan akan berada di luar kendali. Inilah alasan mengapa Anda harus memisahkan dan menyimpan variabel lingkungan.
Buat file .env.local di folder root proyek Next.js Anda dan masukkan kode di bawah ini. Salin nilai alamat dan kunci dari halaman Settings > API di dasbor Supabase Anda.