Next.jsでフォームを扱う: Server Actionsを活用した実践例

Next.js でフォームを扱う際、delete や edit の操作で特定の要素に関連付けられた id を送信する必要があります。このとき、server actions を活用する場合の方法を2つ紹介します。同じフォームを hidden input と bind id の2種類で実装し、それぞれの利点を説明します。

---

方法1: Hidden Input を使用する

hidden 属性を持つ入力フィールドをフォーム内に含めて、id を送信する方法です。

実装例

export default function FormWithHiddenInput() {
  async function handleAction(data: FormData) {
    'use server';
    const id = data.get('id');
    console.log(`Action for id: ${id}`);
  }

  return (
    <form action={handleAction} method="post">
      <input type="hidden" name="id" value="123" />
      <button type="submit">Submit</button>
    </form>
  );
}

メリット

• フォーム全体で必要なデータを一括で管理可能。
• シンプルな構造で柔軟性が高い。

デメリット

• JavaScript を使用せず動的に id を更新する場合、手間がかかる。

---

方法2: ActionにBind ID を使用する

id をサーバーアクションに直接バインドし、フォームの送信時にサーバー側で処理を行う方法です。

実装例

export default function FormWithBindId() {
  async function handleAction(id: string) {
    'use server';
    console.log(`Action for id: ${id}`);
  }

  return (
    <form action={handleAction.bind(null, '123')} method="post">
      <button type="submit">Submit</button>
    </form>
  );
}

メリット

• id を明示的にバインドするため、直感的にデータを関連付けられる。
• コード量が少なくなる。

デメリット

• バインドされた関数が増えると可読性が下がる可能性がある。
• action プロパティが長くなる。

---

どちらを選ぶべきか？

Hidden Input を使うべき場合

• フォーム全体でデータを一括で管理したい。
• 入力値が多い場合や複雑なフォーム構造の場合に有効。

ActionにBind ID を使うべき場合

• 明確に1つの id を直接処理に紐付けたい。
• コード量を最小限に抑えたい。

---

まとめ

Next.js の server actions を活用したフォーム設計では、hidden input と bind id のどちらのアプローチも有効です。それぞれの方法を理解し、プロジェクトの要件に応じて適切な方法を選びましょう。