Next.js ile Server Actions Kullanımı (Detaylı Rehber)

Next.js'in en güçlü özelliklerinden biri olan Server Actions, frontend üzerinden doğrudan veritabanı işlemlerini güvenli bir şekilde yapmamızı sağlıyor. Geleneksel API endpoint'leri yazma devrini kapatan bu teknolojiyi projelerinize nasıl entegre edersiniz?

Server Action Nedir?

Kısaca özetlemek gerekirse; React bileşenleri içinden çağrılabilen ancak sadece ve sadece sunucu tarafında (Server-side) çalışan asenkron fonksiyonlardır. Bu sayede API route oluşturmanıza, fetch() kullanmanıza veya state yönetimiyle form verisi taşımanıza gerek kalmaz.

Basit Bir Form Örneği

Geleneksel yöntemde bir iletişim formu yapmak için önce bir API yazıp sonra onSubmit ile o API'ye istek atardık. Server Actions ile olay şu kadar basit:

// app/actions.ts
'use server'

export async function sendMessage(formData: FormData) {
  const message = formData.get('message');
  
  // Doğrudan veritabanına bağlan ve kaydet
  await db.messages.insert({ text: message });
}

// app/components/Form.tsx
import { sendMessage } from '../actions'

export default function ContactForm() {
  return (
    <form action={sendMessage}>
      <input type="text" name="message" required />
      <button type="submit">Gönder</button>
    </form>
  )
}