Next.js 15 Server Actions: Gelişmiş Form Yönetimi ve Veritabanı İşlemleri

Next.js 15 ile Gelen Güçlü Yenilikler

Modern web geliştirmede sunucu ve istemci arasındaki iletişim her zaman karmaşık olmuştur. Ancak Next.js 15 ile olgunlaşan Server Actions mimarisi, form gönderimlerini ve veri mutasyonlarını (mutation) daha önce hiç olmadığı kadar kolay ve güvenli bir hale getiriyor.

Eskiden API rotaları (/api/submit) oluşturup bu rotalara fetch istekleri atarken, artık doğrudan sunucuda çalışan fonksiyonları formun action özelliğine bağlayabiliyoruz.

Server Actions Nasıl Çalışır?

Bir Server Action, başlığında "use server" direktifini taşıyan asenkron bir fonksiyondur. Bu fonksiyon, istemci tarafından tetiklendiğinde perde arkasında Next.js otomatik olarak bir POST isteği oluşturur ve çalıştırır.

"use server"

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')
  
  if (!title || !content) {
    return { error: 'Başlık ve içerik zorunludur!' }
  }

  // Veritabanına kaydet
  await db.post.create({
    data: { title: title as string, content: content as string }
  })

  // Sayfayı önbellekten sil ve yenile
  revalidatePath('/posts')
  
  return { success: 'Başarıyla kaydedildi!' }
}

Gelişmiş Form Yönetimi (useActionState)

React 19 ile birlikte gelen ve Next.js 15'in temel yapı taşlarından olan useActionState (eski adıyla useFormState) hook'u, server actions'ların döndürdüğü sonuçları veya hata mesajlarını yakalamak için biçilmiş kaftandır.

"use client"
import { useActionState } from 'react'
import { createPost } from './actions'

export default function PostForm() {
  const [state, action, isPending] = useActionState(createPost, null)

  return (
    <form action={action}>
      <input type="text" name="title" placeholder="Başlık" />
      <textarea name="content" placeholder="İçerik"></textarea>
      
      {state?.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state?.success && <p style={{ color: 'green' }}>{state.success}</p>}
      
      <button type="submit" disabled={isPending}>
        {isPending ? 'Kaydediliyor...' : 'Gönder'}
      </button>
    </form>
  )
}