Menu
CoddyTech

回顾:服务端操作

本课属于 Coddy React 学习旅程的“Next.js 基础”单元。第 33 课,共 47 课。

challenge icon

挑战

中等

本章回顾:下面的 guestbook 不会保存任何内容,也不会更新。构建完整流程:表单 → action → 刷新后的页面。

  1. 在 app/actions.js 中,用 'use server' 标记文件,并将它放在第一行,保存后调用 revalidatePath('/')(从 'next/cache' 导入)。
  2. 在 app/page.jsx 中,从 './actions' 导入 addGuest,然后用带有 id="guest-form" 和 action={addGuest} 的 <form> 包住输入框和按钮。
  3. 给输入框添加 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>
    );
}

Next.js 基础中的所有课