Итоги: Server Actions
Часть раздела Основы Next.js путешествия по React на Coddy — урок 33 из 47.
Задание
СреднеИтог главы: гостевая книга ниже ничего не сохраняет и никогда не обновляется. Создайте весь поток: форма → action → обновленная страница.
- В файле
app/actions.jsотметьте файл директивой'use server'на самой первой строке, а после сохранения вызовитеrevalidatePath('/')(импортированную из'next/cache'). - В файле
app/page.jsxимпортируйтеaddGuestиз'./actions'и обернитеinputиbuttonв<form>сid="guest-form"иaction={addGuest}. - Задайте для
inputатрибутname="name": этоkey, который action считывает с помощьюformData.get('name').
Попробуйте сами
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Все уроки раздела Основы Next.js
2Маршрутизация и ссылки
Папки как маршрутыВложенные маршрутыСвязывание страницДинамические маршрутыСтраницы 404 (Not Found)Итоги: Маршрутизация
3Макеты и метаданные
Корневой макетОбщая навигацияВложенные макетыМетаданные страницыДинамические метаданныеИтоги: Макеты6Server Actions
Что такое Server ActionФормы в действииЧтение данных формыОбновление страницыИтоги: Server Actions