Pengembangan Web web development Fauzian Ahmad August 19, 2025 0 Comments

Proses Pembuatan Fitur CRUD di Web dengan Next.js dan Supabase

Pendahuluan

CRUD (Create, Read, Update, Delete) adalah empat operasi dasar yang hampir selalu ada dalam aplikasi web dinamis. Mulai dari sistem blog, aplikasi to-do list, hingga marketplace, semuanya membutuhkan kemampuan untuk menyimpan, menampilkan, mengubah, dan menghapus data.

Dalam pengembangan modern, Next.js menjadi pilihan populer karena performa tinggi, dukungan untuk server-side rendering (SSR), dan kemudahan integrasi dengan berbagai backend. Sementara itu, Supabase hadir sebagai backend-as-a-service yang menyediakan database PostgreSQL, autentikasi, storage, dan fitur realtime yang memudahkan developer.

Menggabungkan Next.js dan Supabase memungkinkan kita membangun aplikasi CRUD dengan cepat, aman, dan skalabel tanpa perlu menulis backend manual dari nol. Artikel ini akan membahas langkah praktis dalam membuat fitur CRUD sederhana menggunakan kedua teknologi ini.

Implementasi Fitur CRUD

Berikut ini penjelasan dan contoh implementasi dari penggunaan fitur CRUD pada Next.js + Supabase.

Contoh Studi Kasus

Kita akan membuat tabel database di SQL Editor di Supabase, kamu bisa jalankan query SQL. Contohnya kita akan membuat tabel Siswa di Supabase dengan kolom:

id → (UUID, primary key).
nama → nama siswa (text).
kelas → kelas siswa (text).
umur → umur siswa (int).
created_at → waktu data dibuat.

Berikut ini bentuk kode:

Berikut implementasi tiap operasi CRUD:

1. Create (Tambah Siswa)

Penjelasan Singkat :

export → Supaya fungsi bisa dipakai di file lain.
async → Fungsi berjalan asynchronous (butuh await).
Parameter → nama, kelas, umur.
supabase → Objek koneksi ke database Supabase.
await → Tunggu hasil query selesai.
{ data, error } → Supabase selalu return object { data, error }.
.from(‘siswa’) → Pilih tabel siswa.
.insert(…) → Tambah data baru ke tabel siswa.
{ nama, kelas, umur } → object data siswa yang baru.
[ … ] → karena Supabase butuh array object.
if (eror) console.eror() → Jika error, tampilkan pesan di console.
return data; → Return data hasil insert/tambah.

2. Read (Tampilkan Daftar Siswa)

Penjelasan Singkat :

getSiswa() → ambil semua data.
.select(‘*’) → Ambil semua yang ada didalam kolom.
.order(‘created_at’, { ascending: false }) → Urutkan data dari yang terbaru (descending).
if (eror) console.eror() → Jika error, tampilkan pesan di console.
return data; → Return semua data siswa.

3. Update (Ubah Data Siswa)

Penjelasan Singkat :

.update(newData) → Update data sesuai objek newData.
.eq(‘id’, id) → Hanya update baris dengan id tertentu.
if (eror) console.eror() → Jika error, tampilkan pesan di console.
return data; → Kembalikan data hasil dari update.

4. Delete (Hapus Siswa)

Penjelasan Singkat :

deleteSiswa(id) → siswa yang mau dihapus.
.delete() → Hapus data dari tabel.
.eq(‘id’, id) → Hanya hapus baris dengan id sesuai.
if (eror) console.eror() → Jika error, tampilkan pesan di console.
return data; → Kembalikan data hasil dari update.

Penutup

Dengan memanfaatkan Next.js sebagai frontend dan Supabase sebagai backend, proses pembuatan aplikasi CRUD menjadi jauh lebih cepat dan sederhana. Next.js memberikan kerangka kerja modern untuk UI dan routing, sementara Supabase menyediakan database PostgreSQL lengkap dengan API siap pakai, autentikasi, serta fitur realtime.

Solusi Digitalisasi Bisnis dari Nawatara Tech

Buat kamu yang pengen punya website tapi nggak mau ribet, MauWebBisnis dari Nawatara Tech siap bantu! Kami bikin website yang profesional, cepat, dan gampang dikelola. Mulai dari Landing Page sampai Website Sistem Otomatis, semua bisa disesuaikan dengan kebutuhan bisnis kamu.

Jadi, daripada terus-terusan terjebak di marketplace, lebih baik ambil langkah besar buat punya website sendiri. Saatnya bisnis kamu lebih stabil, lebih untung, dan lebih siap bersaing!

Bangun website profesional yang bukan hanya cepat dan menarik, tapi juga didukung strategi digital marketing lengkap untuk meningkatkan traffic dan penjualan bisnismu!

MauWebBisnis dari NawaTara Tech menawarkan layanan Website Profesional #1, mulai dari Landing Page hingga Website Sistem Otomatis yang dirancang untuk meningkatkan visibilitas dan konversi bisnismu.