😸

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

2025/01/24に公開

Next.js でフォームを扱う際、deleteedit の操作で特定の要素に関連付けられた id を送信する必要があります。このとき、server actions を活用する場合の方法を2つ紹介します。同じフォームを hidden inputbind 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 inputbind id のどちらのアプローチも有効です。それぞれの方法を理解し、プロジェクトの要件に応じて適切な方法を選びましょう。

Discussion