CRUD API dengan Next.js Server Actions

Apa itu Server Actions?

Server Actions adalah fitur Next.js yang memungkinkan kita memanggil fungsi server langsung dari komponen client, tanpa perlu membuat API route terpisah.

Setup

Pastikan sudah ada Prisma client dan koneksi database.

Contoh Create

'use server';
import { prisma } from '@/lib/prisma';

export async function createArticle(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  await prisma.article.create({
    data: { title, content, slug: generateSlug(title) },
  });
  
  revalidatePath('/blog');
}

Contoh Delete

export async function deleteArticle(id: number) {
  await prisma.article.delete({ where: { id } });
  revalidatePath('/blog');
}

Form di Client Component

<form action={createArticle}>
  <input name="title" placeholder="Judul" />
  <textarea name="content" placeholder="Konten" />
  <button type="submit">Simpan</button>
</form>

Kesimpulan

Server Actions menyederhanakan arsitektur aplikasi. Tidak perlu buat API route, langsung panggil server function dari form.