EMZETT.
Увійти

Emzett Wiki

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

Properties1
tagsnextjs, frontend

2 хв читання

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