Next.jsでログイン必須ページにアクセスした際にブラウザバックで前のページに戻れない
Next.jsで作ったサービスで、ログイン必須のページに未ログインでアクセスした場合に router.push('/login') でログインページに遷移させるようにしていた。
直リンクでのアクセスの場合は問題がないが、↓のように未ログインページからログイン必須ページにLinkを設置している場合、ブラウザバックで前のページに戻れないことに気づいた。
<Link href="/require_auth_page">ログイン必須ページ</Link>現象としては↓が起きる。
- 未ログイン状態でLinkをクリック
/require_auth_pageにアクセス/loginに遷移- ブラウザバックを実行すると
/require_auth_pageに戻ってしまうため、再度ログインチェックが実行され/loginに戻ってきてしまう - このため何度ブラウザバックを実行しても
/loginページから移動できない状態になる
これを防ぐには router.push('/login') の代わりに router.replace('/login') を使う。
これにより /require_auth_page へのアクセスが /login に置き換えられるため、ブラウザバック時に最初のページに戻れるようになる。