Next.js artık geliştiricilerin, form gönderimleri gibi günlük görevler için ayrı API rotaları oluşturma ihtiyacını ortadan kaldırarak, doğrudan bir bileşen üzerinden yalnızca sunucuda çalışan (server-only) fonksiyonları çağırmasına olanak tanıyor. Yeni Server Actions özelliğini kullanarak, tek bir HTML formu, araya bir fetch çağrısı koymadan arka uç kodunu tetikleyebilir; bu da gereksiz kod kalabalığını (boilerplate) azaltır ve ön uç/arka uç sözleşmesini sıkılaştırır.

Eski yöntem neden hantal hissettiriyor

Tipik bir React veya Next.js uygulamasında, basit bir "proje oluştur" formu bir dizi adımı tetikler: bir API rotası dosyası, tarayıcıdan gelen bir fetch isteği, yükleme ve hata durumlarının yönetilmesi, CORS başlıkları ve son olarak yeni verileri yansıtmak için istemci tarafında bir güncelleme. Her adım yeni dosyalar, kod satırları ve hata noktaları ekler. Ekipler, tek amaçları bir veritabanına kayıt yazmak olsa bile, bu parçaları birbirine bağlamak için zaman harcarlar.

Server Actions aradaki boşluğu kapatıyor

Server Actions, yalnızca sunucuda çalışacağı garanti edilen asenkron fonksiyonlardır. Bir dosyanın en üstüne "use server" direktifini eklemek, derleyiciye kodu tarayıcı paketinin (bundle) dışında tutmasını söyler; böylece kod veritabanlarına, gizli bilgilere (secrets) veya yalnızca sunucuya özel herhangi bir kaynağa güvenle erişebilir. Fonksiyon sunucuda yaşadığı için, bileşen ona yerel bir <form> öğesi üzerindeki action özniteliği aracılığıyla doğrudan erişebilir.

Bir action tanımlama

export async function createProject(formData: FormData) {
  const title = formData.get('title') as string;

  if (!title) throw new Error('Title is required');

  await db.project.create({
    data: { title }
  });

  revalidatePath('/dashboard');
}

Fonksiyon bir FormData nesnesi alır, içeriği doğrular, veritabanına yazar ve ardından Next.js'ten /dashboard sayfasını yenilemesini isteyerek kullanıcı arayüzünün (UI) tam bir sayfa yenilemesi olmadan yeni projeyi göstermesini sağlar.

UI ile bağlama

export default function NewProjectForm() {
  return (
    <form action={createProject}>
      <input type="text" name="title" required />
      <SubmitButton />
    </form>
  );
}

Kullanıcı gönder (submit) düğmesine tıkladığında, tarayıcı form verilerini sunucu tarafındaki createProject fonksiyonuna post eder. Bu, standart HTML form davranışını kullandığı için, JavaScript henüz yüklenmemiş olsa bile gönderim işlemi çalışır ve bu da yavaş bağlantılarda algılanan performansı artırır.

Ekipler ne kazanır

  • Daha az dosya – Her uç nokta (endpoint) için ayrı pages/api veya app/api dosyalarına gerek kalmaz.
  • Daha az bağlantı işlemi – Manuel fetch çağrıları veya açık CORS yönetimi gerekmez.
  • Yerleşik tip güvenliği – Fonksiyon imzası sunucu ve istemci arasında paylaşılır, böylece TypeScript uyumsuzlukları erkenden yakalayabilir.
  • Performans avantajı – İstek doğrudan sunucu fonksiyonuna gider ve istemci tarafındaki bir fetch işleminin getireceği fazladan bir ağ adımını (network hop) atlar.

Sınırlar ve dikkat edilmesi gerekenler

Server Actions henüz erken aşamada olan bir özelliktir. Yalnızca "use server" ile işaretlenmiş asenkron fonksiyonlar olabilirler ve istemciye rastgele JavaScript nesneleri döndüremezler; bir yönlendirme (redirect), bir doğrulama (revalidation) veya düz bir yanıtla sonlanmalıdırlar. Hata ayıklama (debugging) süreci farklı hissettirebilir çünkü çağrı yığını (call stack) tarayıcıdan sunucu çalışma zamanına (runtime) atlar; bu durum, klasik API rotası günlüklerine alışkın geliştiricileri şaşırtabilir. Ayrıca, birden fazla mikro hizmeti içeren veya hassas HTTP durum kodlarına ihtiyaç duyan karmaşık iş akışları hala geleneksel bir API uç noktası gerektirebilir.

Takip edilmesi gerekenler

Next.js, muhtemelen gelecek sürümlerde Server Actions API'sini genişleterek daha fazla yanıt türü desteği ve daha iyi araç entegrasyonu ekleyecektir. Erken benimseyenler, kritik öneme sahip özellikleri bu yola taşımadan önce kararlılığı ölçmek için çerçevenin (framework) değişiklik günlüğünü (changelog) ve topluluk geri bildirimlerini takip etmelidir. Paket boyutu (bundle size) ve sunucu tarafı işleme (server-rendering) metriklerini izlemek, azaltılan istemci kodunun özel trafik modelleriniz için ölçülebilir gecikme kazanışlarına dönüşüp dönüşmediğini de ortaya çıkarabilir.

Özetle

Next.js Server Actions, bir bileşenin doğrudan yalnızca sunucuda çalışan bir fonksiyonu çağırmasına izin vererek, React projelerini uzun süredir karmaşıklaştıran aracıları ortadan kaldırır. Sonuç; özelliğin mevcut kısıtlamaları projenin ihtiyaçlarıyla örtüştüğü sürece, daha temiz kod, daha hızlı gidiş-dönüş süreleri ve daha sorunsuz bir geliştirici deneyimidir.