[今さら始める Next.js マスター #5] Server Actionsでフォームを扱う

Server Actionsとは

Server Actionsは、サーバー側で実行される関数をフォーム送信やユーザー操作から呼び出す仕組みです。単純なフォーム処理なら、別途API Routeを作らずに実装できます。

入力を受け取り、検証し、データベースに保存し、必要なら画面を更新するところまでをNext.jsの流れの中で扱えます。

基本的なフォーム処理

Server Actionは"use server"を付けて定義します。

async function createPost(formData: FormData) {
  "use server";

  const title = formData.get("title");
  // 保存処理を書く
}

export default function PostForm() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button type="submit">Save</button>
    </form>
  );
}

フォームのactionに関数を渡せるため、クライアント側のfetch処理を書かなくても送信できます。

バリデーションとエラー処理

実務では、入力値の検証が欠かせません。空文字、文字数、形式、権限などをサーバー側で確認します。

確認すること	例
必須入力	タイトルが空ではない
形式	メールアドレスの形になっている
権限	投稿できるユーザーか
重複	同じslugが存在しないか

クライアント側のチェックは便利ですが、信頼できる最終確認は必ずサーバー側で行います。

Progressive Enhancement

Server Actionsは、JavaScriptが読み込まれる前でもフォーム送信を成立させやすい設計です。これをProgressive Enhancementと呼びます。

まずHTMLとして自然に動くフォームを作り、その上にローディング表示や楽観的更新などの体験を重ねていくと、壊れにくいUIになります。

useActionStateとuseFormStatus

送信結果やエラーを画面に出したい場合はuseActionState、送信中の状態をボタンなどに反映したい場合はuseFormStatusが役立ちます。

Server Actionsは、フォーム処理をNext.jsらしく短く書ける便利な機能です。ただし、認証、検証、権限チェックは省略せず、サーバー側の責務として丁寧に扱う必要があります。