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 に置き換えられるため、ブラウザバック時に最初のページに戻れるようになる。

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

Next.js 11

手軽にアップグレードできた

VercelのNode.jsバージョンを変更する

Settings => General => Node.js Version から変更できる

FigmaでSVG Octocatを作る その3

アウトライン化大事