Формы в действии

Часть раздела Основы Next.js путешествия по React на Coddy — урок 30 из 47.

В обычном HTML атрибут формы action содержит URL для отправки POST-запроса. В Next.js вместо этого можно передать функцию:

import { addItem } from './actions';

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

При submit React делает для вас три вещи: он останавливает стандартную перезагрузку страницы браузером при submit, собирает именованные поля form в объект FormData и вызывает ваш action с ним.

Обратите внимание на то, чего здесь нет: никакого onSubmit, никакого event.preventDefault(), никакого состояния. И эта страница всё ещё остаётся Server Component: action — это передаваемые данные, а не обработчик событий, поэтому они легко пересекают границу.

К чему стоит подготовиться: элемент сохранён, но список на экране пока не изменится. Страница уже отрендерилась на сервере, и ничто не передало ей команду обновиться. Через два урока вы исправите это одной строкой.

Задание

Новичок

В списке покупок есть input и button, но ничто не связывает их с сервером. Функция action уже написана для вас в app/actions.js.

В app/page.jsx импортируйте addItem из './actions'.
Оберните input и button в <form> с id="add-form".
Передайте этой форме action={addItem}.

Оставьте у input атрибут name="text" без изменений: action считывает поле с этим именем.

Попробуйте сами

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}