Server Actions & Form Handling ('use server') — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Server Actions didefinisikan dengan direktif 'use server' di dalam fungsi atau file terpisah
Dapat dipanggil langsung dari atribut action={createEvent} pada elemen HTML <form>
Dukungan penuh untuk Progressive Enhancement (form tetap berfungsi meski JS client belum selesai di-load)

⚡ Revolusi Mutasi Data dengan Server Actions

Server Actions memungkinkan Anda menulis fungsi backend yang dapat dipanggil langsung dari komponen React client atau form tanpa perlu membuat file API route secara terpisah di app/api/.

💻 Kode Contoh Server Action

app/actions.ts

"use server"; // Menandakan fungsi di file ini dieksekusi di server

import { revalidatePath } from "next/cache";

export async function createEvent(formData: FormData) {
  const title = formData.get("title") as string;
  const location = formData.get("location") as string;

  // Simpan ke database (Prisma / Supabase)
  console.log("Saving to DB:", { title, location });

  // Revalidasi cache halaman events agar UI terupdate otomatis
  revalidatePath("/events");
}