まとめ:Server Actions
CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 33/47。
チャレンジ
中級章のまとめ:以下のゲストブックは何も保存せず、更新もされません。フォーム → アクション → 最新ページのフロー全体を構築しましょう。
app/actions.jsで、ファイルの 最初の行 に'use server'を指定し、保存の後にrevalidatePath('/')('next/cache'からインポート)を呼び出します。app/page.jsxで、'./actions'からaddGuestをインポートし、inputとbuttonをid="guest-form"とaction={addGuest}を指定した<form>で囲みます。inputにname="name"を付与します。これがアクションがformData.get('name')で読み取るkeyになります。
自分で試してみよう
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}