🌟

Post-Redirect-Getとは

に公開
Next.js
tech

概要

POSTした結果をそのまま返却すると、ブラウザにPOSTの履歴が残る。
戻るボタンを押した時にPOSTが再度意図せず実行される。
これを防ぐテクニック

Next.jsでの実装例

ApiRouteでPost-Redirect-Get(PRG)の実装をしてみる

src/api/apply.ts
に申し込みのAPIを用意してみる

import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const { name } = await request.json();
  const id = await campaignService.apply({ name });

  // 成功後にリダイレクト　jumpでも
  return NextResponse.redirect(new URL('/form/result? id=' + id, request.url));
}

実装はこの通りシンプル
POSTで結果を返さずリダイレクトするだけ

ExpressとNextを併用していたりするなら、Next側でリダイレクトしてもダメなのでそこは注意

まとめ

ブラウザがリダイレクトの結果を履歴として保存しないことが理解できてなかったから苦しんだが、大変シンプルなものだった

後普通に普段から実装してるなと思った

おわり

Discussion