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キーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった