😸
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
のどちらのアプローチも有効です。それぞれの方法を理解し、プロジェクトの要件に応じて適切な方法を選びましょう。
Discussion