投稿日:2025/1/3
更新日:2025/1/3
Next.jsでサーバーアクションに入門している時にformの投げ方色々あるな、、と感じたので整理してみました。今回はformの値の投げ方のみにフォーカスした記事になります。
formから値を投げるには基本的にはaction
、formAction
、onSubmit
の属性を利用することになります。action
、formAction
はサーバーサイドで、onSubmmitはクライアントサイド(ブラウザ上)で機能します。
HTML の<form>タグに使用される属性で、フォームを送信した際の送信先 URL を指定する。
主にサーバーにフォームデータを送信するためのエンドポイントを書く。
<form action="/submit" method="POST">
<input type="text" name="name" />
<button type="submit">送信</button>
</form>
method
属性 (GET
や POST
) と組み合わせて使用される。action
による動作がなく、サーバーサイドで処理される。HTMLの<button>
または <input>
タグで使用され、フォーム送信時の送信先 URL をオーバーライドする。
特定のボタンや入力項目で別々の送信先を指定したい場合に利用
<form action="/default">
<input type="text" name="name" />
<button type="submit" formAction="/submit1">送信1</button>
<button type="submit" formAction="/submit2">送信2</button>
</form>
action
属性よりも優先順位が高い(この場合、/defaultには飛ばない)HTML の<form>タグに使用される属性で、フォーム全体が送信される際に JavaScript で処理するためのイベントハンドラ。ブラウザで動いてくれるのでフォーム送信時にバリデーションやカスタム処理実行することができる
<form onSubmit="return validateForm()">
<input type="text" name="name" />
<button type="submit">送信</button>
</form>
const handleSubmit = (e) => {
// デフォルトの送信を防ぐ
e.preventDefault();
console.log('フォーム送信');
};
return (
<form onSubmit={handleSubmit}>
<input type="text" name="name" />
<button type="submit">送信</button>
</form>
);
さて、本題です。
これのなにが嬉しいかというと従来サーバーでしかできなかった処理をAPIを利用しなくても良くなりました。どういうことかというとaction
、formAction
属性に従来ではAPIのエンドポイントを指定していましたが、これを非同期関数を指定することによってAPIエンドポイントを作成せずとも利用できるようになりました。
// action属性利用の場合
"use client";
import { submitForm } from "./action";
export default function Page() {
return (
<form action={submitForm}>
<input type="text" name="name" />
<button type="submit">送信</button>
</form>
);
}
// formAction属性利用の場合
"use client";
import { submmitForm } from "./action";
export default function Page() {
return (
<form>
<input type="text" name="name" />
<button formAction={submitForm} type="submit">送信</button>
</form>
);
}
"use server";
export async function submitForm(formData: FormData) {
const name = formData.get("name");
console.log(name);
}
ポイントは大きく2つです。
デフォルトで引数を1つとることが可能で、この中に送信されたデータがオブジェクトとして入ってきます(formDataの中身です)。こうすることで、APIを用意せずともサーバーサイドでの処理を記載することができます。
今回はフォームの投げ方のみにフォーカスした記事を書いてみました。
JSが無効化されている環境でも利用できる点、API作成の必要がない点では便利だなーと思うとともにNext.jsでの責任範囲が膨大になりそうでその辺のアーキテクチャは考えないとなと思いました。