Next.js 16'da Server Actions ile form yönetimi

Server Actions, sunucuda çalışan bir fonksiyonu doğrudan bir formun action özelliğine vermenizi sağlıyor. Arada API route, fetch çağrısı veya JSON dönüşümü yok.

En basit hali

async function createPost(formData: FormData) {
  "use server";
  const title = formData.get("title");
  await db.insert(posts).values({ title });
}

export default function Page() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>Kaydet</button>
    </form>
  );
}

JavaScript yüklenmeden önce bile çalışır, çünkü sonuçta bu normal bir HTML formu.

Hataları göstermek

useActionState ile action'ın döndürdüğü değeri bileşende kullanabilirsiniz:

"use client";
const [state, action, pending] = useActionState(createPost, undefined);

pending sayesinde butonu devre dışı bırakmak da tek satır.

Unutulmaması gereken

Server Action'lar herkese açık HTTP uç noktalarıdır. Formun sadece giriş yapmış kullanıcıya gösterilmesi yetmez; action'ın içinde de yetki kontrolü yapın.

Arayüzde gizlemek güvenlik değildir.