14. Server Actions — フォームからサーバー処理を呼ぶ

Server Action は、先頭に "use server" と書いた async 関数で、フォームの action 属性に直接渡せます。送信されると関数がサーバー側で実行され、入力内容は FormData として受け取れます。

従来は「API を作り、フォームから fetch で呼ぶ」という2段階が必要でしたが、Server Action なら関数を1つ書くだけで済みます。問い合わせフォームの送信やデータの保存など、「ユーザーの入力をサーバーで処理する」場面の基本手段です。

つまずきやすいのは、これが普通の関数に見えてもサーバーで動くという点です。console.log の出力はブラウザではなく開発サーバーのターミナルに出るので、「ログが出ない」と思ったらターミナルを確認してください。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/contact/page.tsx
async function sendMessage(formData: FormData) {
  "use server";
  const message = formData.get("message");
  console.log("受信:", message); // サーバー側のターミナルに出る
}

export default function ContactPage() {
  return (
    <form action={sendMessage}>
      <textarea name="message" />
      <button type="submit">送信</button>
    </form>
  );
}

公式ドキュメントで詳しく ↗