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 metin satırını kaydetmek şaşırtıcı derecede fazla tören gerektiriyordu. Bir uç nokta yazdınız:

// 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 dizede yer alan veriyi bir formdan veritabanına taşımak için iki dosya, bir URL, bir yöntem, başlıklar ve her iki yönde JSON.

Bir Server Action hepsini siler. İlk satırı 'use server' olan bir dosyaya async bir işlev 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>

İşin tamamı bu. Adlandırmaya değer üç ayrıntı var:

• 'use server' dosyanın ilk satırı olmalıdır: 'use client' ile aynı türden, ancak ters yönde işaret eden bir belirteçtir. Burada dışa aktarılan her şeyin sunucuda çalıştığını belirtir.
• İşlev gövdesi tarayıcıya hiçbir zaman ulaşmaz. Veritabanı kimlik bilgileriniz bunun içinde güvendedir: tarayıcı yalnızca çağırabileceği bir başvuru alır.
• Hiçbir URL yazmadınız. Next.js uç noktayı sizin için oluşturur; action={addItem} bağlantıyı kurar.

Temel Bilgiler ile bir fark: bu form girdileri kontrolsüzdür. useState yok, value yok, onChange yok: metni tarayıcı tutar ve name özniteliği, action'ın gönderim sırasında metni bulma yöntemidir.