Next.js 15 ile Server Actions kullanımı ve best practices

Next.js 15 ile gelen Server Actions özelliği, form handling ve server-side operasyonları çok daha kolay hale getiriyor. Bu yazıda, Server Actions'ı nasıl kullanacağınızı ve best practices'leri paylaşacağım.

Server Actions Nedir?

Server Actions, React Server Components içerisinde asenkron fonksiyonlar tanımlamanıza ve bunları doğrudan client-side'dan çağırmanıza olanak tanır. Bu sayede API route'larına ihtiyaç duymadan form submission ve data mutation işlemlerini gerçekleştirebilirsiniz.

Basit Bir Örnek

'use server'

async function createPost(formData: FormData) {
  const title = formData.get('title')
  const content = formData.get('content')

  // Database işlemi
  await db.post.create({
    data: { title, content }
  })

  revalidatePath('/posts')
}

export default function CreatePostForm() {
  return (
    <form action={createPost}>
      <input name="title" required />
      <textarea name="content" required />
      <button type="submit">Oluştur</button>
    </form>
  )
}

Best Practices

• Server Actions'ı ayrı dosyalarda tanımlayın ve 'use server' direktifini kullanın
• Form validasyonu için Zod gibi kütüphaneler kullanın
• Error handling'i düzgün yapın ve kullanıcıya anlamlı mesajlar gösterin
• revalidatePath veya revalidateTag ile cache'i güncelleyin
• Optimistic updates için useOptimistic hook'unu kullanın

Sonuç

Server Actions, Next.js uygulamalarında form handling ve data mutation işlemlerini çok daha basit hale getiriyor. Doğru kullanıldığında, kod tekrarını azaltır ve daha temiz bir kod yapısı oluşturmanıza yardımcı olur.