Пошук уроків, статей та іншого контенту
Створите HTML-форму, яка викликає Server Action через атрибут action і передає їй дані.
У Next.js HTML-форма може напряму викликати Server Action через атрибут action.
Server Action — це асинхронна функція, яка виконується на сервері. Під час надсилання форми Next.js:
збирає значення полів форми;
створює об’єкт FormData;
передає його Server Action;
виконує функцію на сервері.
Для цього функція повинна містити директиву "use server".
Створимо сторінку з формою для надсилання імені та електронної пошти.
Файл app/page.tsx:
export default function HomePage() {
async function saveContact(formData: FormData) {
"use server";
const name = formData.get("name");
const email = formData.get("email");
if (typeof name !== "string" || typeof email !== "string") {
return;
}
if (!name.trim() || !email.trim()) {
return;
}
console.log("Отримано дані:", {
name,
email,
});
}
return (
<main>
<h1>Контактна форма</h1>
<form action={saveContact}>
<div>
<label htmlFor="name">Ім’я</label>
<input id="name" name="name" type="text" required />
</div>
<div>
<label htmlFor="email">Електронна пошта</label>
<input id="email" name="email" type="email" required />
</div>
<button type="submit">Надіслати</button>
</form>
</main>
);
}У цьому прикладі HomePage є Server Component за замовчуванням, тому в ньому можна оголосити Server Action із директивою "use server".
Ключовою частиною є атрибут:
<form action={saveContact}>На відміну від звичайного HTML, тут action отримує не URL, а функцію saveContact.
Щоб значення поля потрапило до FormData, поле повинно мати атрибут name:
<input name="name" type="text" />Значення можна отримати в Server Action за допомогою методу get:
const name = formData.get("name");Аргумент "name" має збігатися зі значенням атрибута name у відповідному полі форми.
У наведеному прикладі при надсиланні форми буде створено приблизно такий набір даних:
name → "Олена"
email → "olena@example.com"Метод formData.get() повертає значення типу FormDataEntryValue | null. Це означає, що результат може бути:
рядком;
об’єктом File, якщо поле передає файл;
null, якщо поля з таким іменем немає.
Тому перед використанням значення варто перевірити його тип:
const name = formData.get("name");
if (typeof name !== "string" || !name.trim()) {
return;
}Атрибут required у HTML допомагає не надсилати порожнє поле з браузера, але перевірка всередині Server Action також потрібна. Server Action працює на сервері й не повинна покладатися лише на перевірки в браузері.
У прикладі дані виводяться через console.log:
console.log("Отримано дані:", {
name,
email,
});Це повідомлення з’явиться в терміналі, де запущено сервер Next.js, а не в консолі браузера.
У реальному застосунку в Server Action можна виконати серверну операцію, наприклад зберегти дані в базі даних або передати їх іншому серверному сервісу.
Server Action повинна бути async.
Для Server Action потрібно використати "use server".
У форми має бути action={назваФункції}.
Кожне поле, яке потрібно передати, повинно мати атрибут name.
Значення читаються через formData.get("назваПоля").
Дані потрібно перевіряти на сервері перед подальшим використанням.
id замість nameАтрибут id потрібен для зв’язку поля з label, але саме name визначає, чи потрапить поле до FormData.
Неправильно:
<input id="name" type="text" />Правильно:
<input id="name" name="name" type="text" />У action потрібно передати саму функцію, без дужок:
Правильно:
<form action={saveContact}>Неправильно:
<form action={saveContact()}>Запис із дужками викликає функцію під час побудови компонента, а не під час надсилання форми.
Якщо поле має name="email", потрібно використовувати таке саме ім’я:
const email = formData.get("email");Виклик formData.get("userEmail") поверне null, якщо поля з name="userEmail" немає.
"use server"Без цієї директиви функція не буде визначена як Server Action:
async function saveContact(formData: FormData) {
"use server";
// код, що виконується на сервері
}Server Action можна викликати безпосередньо через атрибут action форми.
Next.js автоматично передає функції об’єкт FormData.
Значення полів отримують за їхнім атрибутом name.
Server Action виконується на сервері.
Отримані дані потрібно перевіряти всередині Server Action.