Server Actionsの触り
fetch を書かずにサーバーへ渡す
ここまでの作りでは、送る側と受け取る側の2つを書いてきました。ページで fetch("/api/items", { method: "POST" }) と書き、app/api/items/route.ts で POST を書く。あいだをつなぐのは URL です。
Next.js には、この2つを1つにまとめる書き方があります。Server Actions と呼びます。サーバーで動かしたい関数の先頭に "use server" と書き、その関数をフォームに直接渡します。
TypeScript
"use server";
export async function createItem(formData: FormData) {
const title = String(formData.get("title") ?? "");
return { message: title + " を受け付けました" };
}TypeScript (JSX)
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 に渡す代わりにページ側から直接呼びます。書き方そのものは本物と同じです。