Server Actionとは

これでサーバー上のデータを読み取れるようになりました。次はもう半分のステップ、データの変更に進みましょう。

少し前まで、1行のテキストを保存するだけでも驚くほどのステップが必要でした。次のようなエンドポイントを作成していました。

// app/api/items/route.js
export async function POST(request) {
    const body = await request.json();
    saveItem(body.text);
    return Response.json({ ok: true });
}

…そしてブラウザから呼び出しました:

await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
});

2つのファイル、URL、method、headers、そして両方向でのJSONを使用して、フォームからデータベースへと1つの文字列を移動します。

Server Action はそれらをすべて不要にします。1行目に 'use server' と記述したファイル内で async 関数のを作成します：

// app/actions.js
'use server';

import { saveItem } from '../lib/db';

export async function addItem(formData) {
    saveItem(formData.get('text'));
}

…そしてその関数をフォームに渡します：

<form action={addItem}>
    <input name="text" />
    <button type="submit">Add</button>
</form>

これで全てです。3つのポイントを押さえておきましょう：

• 'use server' はファイルの1行目に配置する必要があります: 'use client' と同様のマーカーですが、逆の方向を指します。ここから export されるものはすべて server 上で実行されるという意味になります。
• function の body がブラウザに到達することはありません。 データベースの認証情報などは安全に保護されます。ブラウザには呼び出し可能な参照のみが渡されます。
• URLを書く必要はありません。 Next.jsがエンドポイントを自動的に作成します。action={addItem} がその紐付けを行います。

Fundamentalsとの対比として、これらのフォーム入力は非制御（uncontrolled）です。useStateも、valueも、onChangeも必要ありません。ブラウザがテキストを保持し、送信時にはname属性を使ってactionがそれを取得します。