Menu
Coddy logo textTech

まとめ:Server Actions

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 33/47。

challenge icon

チャレンジ

中級

章のまとめ:以下のゲストブックは何も保存せず、更新もされません。フォーム → アクション → 最新ページのフロー全体を構築しましょう。

  1. app/actions.js で、ファイルの 最初の行'use server' を指定し、保存の後に revalidatePath('/')'next/cache' からインポート)を呼び出します。
  2. app/page.jsx で、'./actions' から addGuest をインポートし、inputbuttonid="guest-form"action={addGuest} を指定した <form> で囲みます。
  3. inputname="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>
    );
}

Next.js の基本のすべてのレッスン