Next.js ブラウザ戻る/進む (History.back / History.forward) の時に常にページトップ (スクロール量をリセット) で表示させたい

Next.js で作ったアプリでブラウザの戻る / 進む ( router.back() History.back() / History.forward() ) が実行された際に、最後に見ていた時のスクロール量が保持されるのでスクロール量を 0 にして遷移させたかったのメモ

scrollRestoration オプションを使う

ブラウザの History API に History.scrollRestoration というブラウザのスクロール量を保持しておく機能があり、デフォルト値はスクロール量を保持しておく auto になっていて Next.js もこれを踏襲している。

History.scrollRestoration
auto The location on the page to which the user has scrolled will be restored.
manual The location on the page is not restored. The user will have to scroll to the location manually.
cf. History.scrollRestoration - Web APIs | MDN

Next.js にも scrollRestoration のオプションが有りデフォルトが false (history.scrollRestoration = "auto")。
このオプションを true にするとスクロール量の保持を手動で制御する history.scrollRestoration = "manual" になり、ブラウザの戻る / 進むをした際にスクロール量が 0 (ページトップ) で表示されるようになる。

`next.config.js` に `scrollRestoration` のオプションを設定する

ブラウザの戻る / 進むが実行された時に常にページトップ (スクロール量 0) で表示したい場合、next.config.js に下記のオプションを追加すればOK

next.config.js (ファイルがない場合はプロジェクトのルートディレクトリに作成)

module.exports = {
  experimental: {
    scrollRestoration: true
  }
}

ファイルを保存して yarn dev でアプリを再起動すれば、ブラウザの戻る / 進むの際にスクロール量がリセットされ常にページトップで表示されるようになっているかと思います。

Feed のようなアプリだと戻った時に元のスクロール位置にいてほしかったりするのですが、アプリやサービスによってはページトップで表示できないと UX が悪いということもあると思います。そんな時はこの scrollRestoration を使えばサービス全体の設定ができそうです。
ページごとに個別に対応したい場合は History API の scrollRestoration を使ってページごとに実装する必要がありそうです。

[参考]