// app/todos/page.tsx — wire the action straight to a form
import { createTodo } from "./actions";
export default function Page() {
return (
<form action={createTodo}> {/* no onSubmit, no fetch, no /api route */}
<input name="title" />
<button>Add</button>
</form>
);
}
フォームのactionはServer Actionを指します。送信時、Next.jsはFormDataをサーバーに送信し、そこで関数を実行して、影響を受けるページを再検証できます。すべてAPIルートなしで、クライアント側のフェッチコードもありません。
"use client";
import { createTodo } from "./actions";
export function AddButton() {
return <button onClick={() => createTodo(/* ... */)}>Add</button>;
}
route.tsハンドラーとクライアントフェッチを書かずにミューテーションを実行。revalidatePath/revalidateTagがミューテーション後にキャッシュされたデータをリフレッシュ。⚠️ Server Actions are PUBLIC endpoints under the hood — always validate input and
check authorization inside them, exactly as you would a real API route.
Server Actionsは、通常のミューテーションスタック（APIルート + クライアントフェッチ + 状態処理）を、直接呼び出す単一のサーバー関数に折りたたみます。これはApp Routerのフォームとデータ変更への答えです。
ボイラープレートを削減し、プログレッシブエンハンスメントを有効にし、キャッシング/再検証と統合されますが、（他のエンドポイントと同様に）内部での検証と認可チェックが必要です。
ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する