POST APIを作る
受け取る側を書く
ここまでの GET は、こちらが持っているものを渡すだけでした。POST は逆で、送られてきたものを受け取ります。問い合わせも出品も、受け取る側は POST です。
書き方は GET と同じで、名前を POST にするだけです。違うのは、引数の request から中身を取り出す一手間が要ることです。
TypeScript
export async function POST(request: Request) {
const body = await request.json();
return NextResponse.json({ message: body.name + " さん、ありがとうございます" });
}request.json() は、送られてきた JSON を読み終わるまで待つので await を付けます。GET の searchParams が URL から読むのに対して、POST は本文から読む、という違いです。
送られてきたものを信じない
ここが POST のいちばん大事なところです。ブラウザのフォームを通ったかどうかに関係なく、誰でも好きな中身を送れます。名前が空でも、本文が無くても届きます。
だから受け取った直後に確かめます。おかしければ、保存せずに断ります。
TypeScript
if (!body.name || !body.body) {
return NextResponse.json({ error: "名前と本文は必須です" }, { status: 400 });
}NextResponse.json の第2引数で状態コードを指定できます。400 は「送られてきた内容がおかしい」という意味です。何も指定しなければ 200 になり、これは「うまくいった」という意味です。
受け取る側の合図を数字で返しておくと、ページ側は res.ok を見るだけで成功と失敗を分けられます。res.ok は状態コードが 200 番台なら true になります。
演習
app/api/contact/route.ts に、問い合わせを受け取る POST を書きます。