Server Actionsの触り｜基礎を学ぶ

fetch を書かずにサーバーへ渡す

ここまでの作りでは、送る側と受け取る側の2つを書いてきました。ページで fetch("/api/items", { method: "POST" }) と書き、app/api/items/route.ts で POST を書く。あいだをつなぐのは URL です。

Next.js には、この2つを1つにまとめる書き方があります。Server Actions と呼びます。サーバーで動かしたい関数の先頭に "use server" と書き、その関数をフォームに直接渡します。

"use server";

export async function createItem(formData: FormData) {
  const title = String(formData.get("title") ?? "");
  return { message: title + " を受け付けました" };
}

import { createItem } from "./actions";

export default function SellPage() {
  return (
    <form action={createItem}>
      <input name="title" />
      <button type="submit">出品する</button>
    </form>
  );
}

URL がどこにも出てきません。fetch も書いていません。それでもボタンを押すと createItem はサーバー側で動きます。あいだの通信は Next.js が用意します。

引数は FormData で届く

form の action に関数を渡すと、その関数は FormData を受け取ります。name を付けた入力が、そのまま formData.get("title") で取り出せます。JSON にして送る手間がありません。ただし取り出した値は文字なので、数として使うなら Number(...) を通します。

route.ts との使い分け

Server Actions が出たからといって route.ts が要らなくなるわけではありません。目安は下記のとおりです。

自分のアプリのフォームから送るだけなら Server Actions が短い
スマホアプリや他社のサービスなど、外から決まった URL で叩かれるなら route.ts

この章で route.ts を先にやったのは、こちらが土台だからです。URL があって、メソッドがあって、状態コードを返す。Server Actions はその往復を隠してくれているだけで、裏で起きていることは同じです。

演習

このプレビューには本物のサーバーがないので、action に渡す代わりにページ側から直接呼びます。書き方そのものは本物と同じです。

Server Actionsの触り

fetch を書かずにサーバーへ渡す

引数は FormData で届く

route.ts との使い分け

演習

ヒント