Apa Itu Server Action

Sekarang kamu bisa membaca data di server. Saatnya melakukan hal yang lain: mengubahnya.

Sampai baru-baru ini, menyimpan satu baris teks memerlukan proses yang jauh lebih rumit dari yang kamu kira. Kamu menulis sebuah endpoint:

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

…lalu memanggilnya dari browser:

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

Dua file, URL, method, header, dan JSON dalam dua arah, untuk memindahkan satu string dari formulir ke database.

Sebuah Server Action menghapus semuanya. Tulis fungsi async dalam file yang baris pertamanya adalah 'use server':

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

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

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

…dan berikan fungsi itu ke sebuah formulir:

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

Itulah keseluruhannya. Ada tiga detail yang perlu disebutkan:

• 'use server' harus menjadi baris pertama file: jenis penanda yang sama dengan 'use client', tetapi mengarah ke sisi sebaliknya. Penanda ini menyatakan: semua yang diekspor di sini berjalan di server.
• Isi fungsi tidak pernah sampai ke browser. Kredensial database-mu aman di dalamnya: browser hanya menerima referensi yang bisa dipanggilnya.
• Kamu tidak pernah menulis URL. Next.js membuat endpoint untukmu; action={addItem} adalah penghubungnya.

Salah satu perbedaan dengan Fundamentals: input formulir ini tidak terkontrol. Tidak ada useState, tidak ada value, tidak ada onChange: browser menyimpan teksnya, dan atribut name adalah cara action menemukannya saat formulir dikirim.