Next.js 14 App Router ve Server Actions Mimarisi

Next.js 14 ile gelen App Router yapısı, web geliştirmede kartları yeniden dağıtıyor. Eskiden API route'ları üzerinden yaptığımız işlemleri artık doğrudan bileşenler içinden "Server Actions" ile nasıl yapacağımızı inceliyoruz.

Server Actions Nedir?

Server Actions, istemci tarafında JavaScript yükünü (bundle size) artırmadan, sunucu üzerinde çalışan asenkron fonksiyonlar yazmanıza olanak tanır. Form verilerini işlemek veya veritabanına kayıt atmak artık API endpoint'i yazmak kadar zahmetli değil.

// (c) CodeMareFi - codemarefi.com.tr
// app/actions.ts
'use server'

import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  // Veritabanına kaydet (Örn: Prisma veya Drizzle ile)
  await db.post.create({ data: { title } });
  
  // Önbelleği temizle ve sayfayı yenile
  revalidatePath('/posts');
}

App Router'ın Avantajları

Eski Pages Router mimarisine kıyasla, klasör bazlı (file-system based) route tanımlamaları, iç içe geçmiş (nested) layout yapıları ve Streaming SSR özellikleri sayesinde uygulamalar hem daha modüler hem de çok daha performanslı hale gelmektedir.