Server Actions: формы без собственного API (Next.js)

Коротко: Server Actions — функции, которые выполняются на сервере и вызываются прямо из форм или компонентов; они заменяют многие написанные вручную маршруты API.

Подробнее: Вместо создания маршрута API для каждой формы вы помечаете функцию "use server" и передаёте её как action в <form>. При отправке браузер вызывает функцию на сервере; сетевой вызов берёт на себя Next.js.

Подробности

Пример

// actions.ts
"use server";
export async function save(formData: FormData) {
  const title = String(formData.get("title") ?? "");
  // проверить, сохранить, затем обновить страницу
}

Достаточно <form action={save}>. Благодаря прогрессивному улучшению форма работает даже без JavaScript. После сохранения вы обновляете данные через revalidatePath/revalidateTag или перенаправляете через redirect.

Безопасность: относитесь как к общедоступному API

Каждое Server Action — конечная точка, доступная по HTTP, даже если выглядит как обычный вызов функции. Поэтому всегда:

• Проверяйте ввод (например, через Zod); типов TypeScript во время выполнения нет.
• Проверяйте вход и разрешение внутри самой функции, а не только в интерфейсе.
• Ограничение частоты запросов для действий, открытых для злоупотреблений.
• Не возвращайте секреты; сообщения об ошибках держите общими.

Состояние и обратная связь

• useActionState предоставляет возвращаемое значение (например, тексты ошибок) и состояние ожидания.
• useFormStatus показывает «Сохранение…» в кнопках.
• useOptimistic показывает изменения сразу, до ответа сервера.
• Для загрузки файлов и потоковой передачи иногда лучше подходят обработчики маршрутов.

Когда лучше маршрут API

Если интерфейсом должны пользоваться внешние клиенты (мобильное приложение, третьи стороны, вебхуки), имеет смысл документированный API с версиями. Server Actions предназначены для вашего собственного интерфейса, а их адреса меняются при сборке.

См. также: Next.js App Router, Валидация форм с Zod, CSRF