Server Actions: kendi API’n olmadan formlar (Next.js)

Kısaca: Server Action’lar sunucuda çalışan ve doğrudan formlardan veya bileşenlerden çağrılan işlevlerdir; elle yazılmış birçok API rotasının yerini alırlar.

Biraz daha ayrıntılı: Her form için bir API rotası kurmak yerine bir işlevi "use server" ile işaretler ve bir <form>’a action olarak verirsin. Gönderimde tarayıcı işlevi sunucuda çağırır; ağ çağrısını Next.js halleder.

Ayrıntılı

Örnek

// actions.ts
"use server";
export async function save(formData: FormData) {
  const title = String(formData.get("title") ?? "");
  // doğrula, kaydet, sonra sayfayı yenile
}

<form action={save}> yeterlidir. Aşamalı geliştirme sayesinde form JavaScript olmadan bile çalışır. Kaydettikten sonra verileri revalidatePath/revalidateTag ile yeniler veya redirect ile yönlendirirsin.

Güvenlik: herkese açık bir API gibi ele al

Her Server Action, salt bir işlev çağrısı gibi görünse bile HTTP üzerinden erişilebilen bir uç noktadır. Bu yüzden her zaman:

• Girdileri doğrula (örneğin Zod ile); TypeScript türleri çalışma zamanında yoktur.
• Oturum açmayı ve izni yalnızca arayüzde değil, işlevin kendi içinde kontrol et.
• Kötüye kullanıma açık eylemler için hız sınırlama.
• Sır döndürme; hata mesajlarını genel tut.

Durum ve geri bildirim

• useActionState dönüş değerini (örneğin hata metinleri) ve bekleme durumunu sağlar.
• useFormStatus düğmelerde “Kaydediliyor…” gösterir.
• useOptimistic, sunucu yanıtlamadan önce değişiklikleri hemen gösterir.
• Dosya yüklemeleri ve akış için rota işleyicileri bazen daha uygundur.

Ne zaman API rotası tercih edilmeli

Dış istemciler (mobil uygulama, üçüncü taraflar, webhook’lar) arayüzü kullanacaksa belgelenmiş, sürümlü bir API mantıklıdır. Server Action’lar kendi arayüzün içindir ve adresleri derleme zamanında değişir.

Ayrıca bak: Next.js App Router, Formları Zod ile doğrulamak, CSRF