回顾:服务端操作
本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 33 课,共 47 课。
挑战
中等本章回顾:下面的 guestbook 不会保存任何内容,也不会更新。构建完整流程:表单 → action → 刷新后的页面。
- 在
app/actions.js中,用'use server'标记文件,并将它放在第一行,保存后调用revalidatePath('/')(从'next/cache'导入)。 - 在
app/page.jsx中,从'./actions'导入addGuest,然后用带有id="guest-form"和action={addGuest}的<form>包住输入框和按钮。 - 给输入框添加
name="name":这是 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>
);
}