Membangun Fullstack App dengan Nuxt dan Prisma

Nuxt dan Prisma adalah kombinasi yang sangat produktif untuk membangun aplikasi fullstack modern. Nuxt mengurus tampilan dan routing, sementara Prisma mengurus komunikasi dengan database lewat schema yang jelas dan tipe data yang aman.

Kenapa Nuxt dan Prisma?

Saat mengerjakan proyek kecil sampai menengah, saya ingin satu repositori saja yang berisi frontend sekaligus backend. Nuxt menyediakan server routes lewat Nitro, jadi endpoint API bisa hidup berdampingan dengan halaman. Prisma melengkapinya dengan query yang rapi dan autocomplete yang akurat.

Langkah awal

1. Buat proyek Nuxt baru, lalu pasang Prisma sebagai dependensi.
2. Definisikan model di schema.prisma, misalnya User dan Post.
3. Jalankan migrasi supaya tabel terbentuk di database.
4. Buat server route di folder server/api yang memanggil Prisma Client.

Contoh endpoint sederhana

export default defineEventHandler(async () => {
  return await prisma.post.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
  })
})

Dengan kode sependek itu, daftar artikel sudah bisa dipakai oleh halaman Nuxt lewat useFetch. Tipe datanya ikut terbawa, jadi kesalahan penulisan field langsung ketahuan saat mengetik.

Hal yang perlu diperhatikan

• Buat satu instance Prisma Client saja agar koneksi database tidak membengkak saat mode pengembangan.
• Validasi input di server sebelum menyentuh database.
• Gunakan select atau include secukupnya supaya respons API tidak terlalu besar.

Penutup

Untuk proyek pribadi maupun aplikasi klien dengan skala wajar, kombinasi ini terasa ringan dan cepat dikerjakan. Kalau kamu baru mau mulai, coba buat aplikasi catatan sederhana dulu sebelum masuk ke fitur yang lebih rumit.