Kenapa Next.js 14 dan Prisma?

Halo! Kalau kamu sedang belajar web development dan ingin membuat aplikasi yang tidak hanya tampil cantik tapi juga punya backend yang solid, Next.js 14 dan Prisma adalah kombinasi yang pas. Next.js memberi kamu framework React yang sudah siap produksi, sementara Prisma membuat urusan database jadi jauh lebih mudah. Di tutorial ini, kita akan bikin aplikasi catatan (notes app) sederhana yang bisa menambahkan, melihat, dan menghapus catatan. Tanpa basa-basi, yuk kita mulai!

Persiapan Awal

Sebelum coding, pastikan kamu sudah menginstall Node.js (versi 18 atau lebih baru) di komputermu. Kita juga akan menggunakan database PostgreSQL (bisa pakai layanan gratis seperti Railway atau Supabase) atau SQLite untuk yang lebih sederhana. Tapi di sini saya akan pakai SQLite agar lebih mudah diikuti.

1. Buat project Next.js baru:

   npx create-next-app@latest notes-app --typescript --tailwind --app
   cd notes-app
   

2. Install Prisma dan database driver:

   npm install @prisma/client
   npm install -D prisma
   npx prisma init --datasource-provider sqlite
   

3. Setelah itu, akan terbentuk folder prisma dan file .env. Buka file schema.prisma dan ubah menjadi:

   generator client {
     provider = "prisma-client-js"
   }
   
   datasource db {
     provider = "sqlite"
     url      = "file:./dev.db"
   }
   
   model Note {
     id        Int      @id @default(autoincrement())
     title     String
     content   String
     createdAt DateTime @default(now())
   }
   

4. Jalankan migrasi:

   npx prisma migrate dev --name init
   

   Perintah ini akan membuat database SQLite dan tabel Note.

Membuat API dengan Next.js Route Handlers

Next.js 14 mendukung Route Handlers yang memudahkan kita membuat endpoint API. Buat folder app/api/notes/route.ts dan tulis kode berikut:

import { NextResponse } from 'next/server';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function GET() {
  try {
    const notes = await prisma.note.findMany({
      orderBy: { createdAt: 'desc' }
    });
    return NextResponse.json(notes);
  } catch (error) {
    return NextResponse.json({ error: 'Gagal mengambil catatan' }, { status: 500 });
  }
}

export async function POST(request: Request) {
  try {
    const { title, content } = await request.json();
    if (!title || !content) {
      return NextResponse.json({ error: 'Judul dan konten harus diisi' }, { status: 400 });
    }
    const note = await prisma.note.create({
      data: { title, content }
    });
    return NextResponse.json(note, { status: 201 });
  } catch (error) {
    return NextResponse.json({ error: 'Gagal membuat catatan' }, { status: 500 });
  }
}

export async function DELETE(request: Request) {
  try {
    const { id } = await request.json();
    await prisma.note.delete({
      where: { id }
    });
    return NextResponse.json({ message: 'Catatan berhasil dihapus' });
  } catch (error) {
    return NextResponse.json({ error: 'Gagal menghapus catatan' }, { status: 500 });
  }
}

Penjelasan:

• GET: mengambil semua catatan, diurutkan dari yang terbaru.
• POST: menambah catatan baru, dengan validasi sederhana.
• DELETE: menghapus catatan berdasarkan ID.

Membuat Antarmuka dengan React Server Components

Kita akan memanfaatkan Server Components untuk mengambil data di sisi server. Buka app/page.tsx dan ganti dengan:

import NoteForm from './components/NoteForm';
import NoteList from './components/NoteList';

async function getNotes() {
  const res = await fetch('http://localhost:3000/api/notes', { cache: 'no-store' });
  if (!res.ok) throw new Error('Gagal mengambil catatan');
  return res.json();
}

export default async function Home() {
  const notes = await getNotes();
  return (
    <main className="max-w-2xl mx-auto p-4">
      <h1 className="text-3xl font-bold text-center mb-8">Catatan Ku</h1>
      <NoteForm />
      <NoteList notes={notes} />
    </main>
  );
}

Catatan: cache: 'no-store' memastikan data selalu segar (tidak di-cache).

Komponen Form untuk Menambahkan Catatan

Buat folder app/components dan file NoteForm.tsx:

'use client';

import { useState } from 'react';

export default function NoteForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const res = await fetch('/api/notes', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ title, content }),
    });
    if (res.ok) {
      setTitle('');
      setContent('');
      // Refresh halaman untuk melihat catatan baru
      window.location.reload();
    }
  };

  return (
    <form onSubmit={handleSubmit} className="mb-8">
      <input
        type="text"
        placeholder="Judul catatan"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
        className="w-full p-2 border rounded mb-2"
      />
      <textarea
        placeholder="Isi catatan"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        required
        className="w-full p-2 border rounded mb-2"
        rows={4}
      />
      <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded">
        Tambah Catatan
      </button>
    </form>
  );
}

Ini adalah komponen klien (client component) yang menangani input dan mengirim data ke API.

Komponen Daftar Catatan

Buat NoteList.tsx:

'use client';

export default function NoteList({ notes }: { notes: any[] }) {
  const handleDelete = async (id: number) => {
    const res = await fetch('/api/notes', {
      method: 'DELETE',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id }),
    });
    if (res.ok) {
      window.location.reload();
    }
  };

  return (
    <div className="space-y-4">
      {notes.map((note: any) => (
        <div key={note.id} className="border p-4 rounded shadow">
          <h2 className="text-xl font-semibold">{note.title}</h2>
          <p className="text-gray-700 mt-2">{note.content}</p>
          <p className="text-sm text-gray-500 mt-2">{new Date(note.createdAt).toLocaleString('id-ID')}</p>
          <button
            onClick={() => handleDelete(note.id)}
            className="mt-2 bg-red-500 text-white px-2 py-1 rounded text-sm"
          >
            Hapus
          </button>
        </div>
      ))}
    </div>
  );
}

Menjalankan Aplikasi

Jalankan perintah:

npm run dev

Buka browser di http://localhost:3000. Kamu akan melihat form untuk menambah catatan dan daftar catatan yang tersimpan. Cobalah tambah dan hapus catatan — semuanya tersimpan di database SQLite.

Langkah Selanjutnya

Selamat! Kamu baru saja membuat aplikasi full-stack pertama dengan Next.js 14 dan Prisma. Ada banyak hal yang bisa dikembangkan: tambahkan fitur edit, autentikasi pengguna, atau deploy ke Vercel. Kuncinya, praktik terus dan jangan takut bereksperimen. Kalau ada kendala, komunitas Next.js dan Prisma sangat aktif membantu. Selamat coding!