Server Action Nedir?

Artık sunucudaki verileri okuyabilirsiniz. Şimdi diğer yarıya geçme zamanı: onu değiştirmek.

Yakın zamana kadar, tek bir satır metni kaydetmek şaşırtıcı derecede çok işlem gerektiriyordu. Bir endpoint yazıyordunuz:

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…sonra bunu tarayıcıdan çağırdık:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

Bir dizeyi bir formdan veritabanına taşımak için iki dosya, bir URL, bir method, headers ve her iki yönde de JSON.

Bir Server Action tüm bu karmaşıklığı ortadan kaldırır. İlk satırında 'use server' bulunan bir dosyada async bir `function` yazın:

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…ve bu işlevi bir forma verin:

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

Hepsi bu kadar. Üç detayı belirtmekte fayda var:

• 'use server' dosyanın ilk satırı olmalıdır: Diğer yönü gösteren, 'use client' ile aynı türde bir işarettir. Şunu ifade eder: Burada dışa aktarılan (export edilen) her şey sunucuda çalışır.
• Fonksiyon gövdesi asla tarayıcıya ulaşmaz. Veritabanı kimlik bilgileriniz (credentials) onun içinde güvendedir: Tarayıcı yalnızca çağırabileceği bir referans alır.
• Hiç URL yazmadınız. Next.js uç noktayı (endpoint) sizin için oluşturur; action={addItem} aradaki bağlantıdır.

Fundamentals ile bir karşılaştırma: bu form girdileri uncontrolled (kontrolsüz) yapıdadır. useState yok, value yok, onChange yok: tarayıcı text'i tutar ve name özniteliği, action'ın bunu submit sırasında nasıl bulduğudur.