Что такое Server Action

Теперь вы можете читать данные на сервере. Пришло время для второй половины: их изменения.

До недавнего времени сохранение одной строки текста требовало удивительно много условностей. Вы писали эндпоинт:

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

…затем вызвали его из браузера:

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

Два файла, URL, method, headers и JSON в обоих направлениях, чтобы переместить одну строку из form в базу данных.

Server Action удаляет всё это. Напишите асинхронную функцию в файле, первая строка которого — 'use server':

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

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

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

…и передать эту функцию в форму:

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

Вот и всё. Стоит отметить три детали:

• 'use server' должна быть первой строкой файла: такой же маркер, как и 'use client', только указывающий в другую сторону. Он говорит: всё, что экспортируется отсюда, выполняется на сервере.
• Тело функции никогда не попадает в браузер. Ваши учётные данные базы данных находятся в безопасности внутри него: браузер получает только ссылку, которую он может вызвать.
• Вы не написали ни одного URL. Next.js создаёт эндпоинт за вас; action={addItem} — это вся обвязка.

Одно из отличий от основ: эти поля ввода формы являются неконтролируемыми. Никаких useState, value и onChange: браузер сам хранит текст, а атрибут name — это то, как action находит его при отправке (submit).