Server Actions

なぜ学ぶか： 「フォームの送信のためにAPIを作ってfetchして…」— その面倒を消すのがServer Actionsです。フォームからサーバーの関数を「直接」呼べます。例を見てください。

まずはこの例を見てみましょう

// ===== actions.ts（サーバーで実行される関数）=====
"use server";

export async function createPost(formData: FormData) {
  const title = formData.get("title");
  // ここでデータベースに保存する（サーバーなので安全）
}

// ===== page.tsx（フォームから直接呼ぶ）=====
<form action={createPost}>
  <input name="title" />
  <button type="submit">投稿する</button>
</form>

formのactionに「サーバーの関数」を直接渡しています。fetchもAPI定義も不要です。

コード例

// ===== app/posts/actions.ts（サーバーで実行される関数）=====
"use server";
import { revalidatePath } from "next/cache";

export async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  // 本来はここで zod 検証 → DB へ保存
  console.log("サーバーで保存:", title);
  revalidatePath("/posts"); // 忘れると画面が古いまま
}

// ===== app/posts/new/page.tsx（フォームから直接呼ぶ）=====
import { createPost } from "../actions";

export default function NewPostPage() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="タイトル" />
      <button type="submit">投稿する</button>
    </form>
  );
}

fetchもAPI定義も出てこないのに、送信内容がサーバーへ届いています。これがServer Actionsの便利さです。