👏
NextJS / App Routerでブラウザバックを防ぐ
target
- formなどでページ上の戻る/進むボタンではなく、ブラウザのヒストリースタックを利用した戻る/進むを防ぎたい
- フォームに入る前のヒストリースタックがない
- 新しいタブでフォームを開いてるなど
solution
useRouter.pushではなく、useRouter.replaceを使いヒストリースタックを増やさずにページを移動させる
"use client";
import { useRouter } from "next/navigation";
const Page = () => {
const router = useRouter();
const handleClick = () => {
router.replace('/path/to/nextpage')
};
return (
<div>
<div>page</div>
<button onClick={handleClick}>go next</button>
</div>
);
};
export default Page;
このようにすると、次のページに移動してもヒストリースタックが増えず、ブラウザバックを使用されることもない
official document
Discussion