投稿日2022年08月31日更新日2022年08月31日

【Next.js】next/linkから動的ルーティングのページに遷移したときに、スクロール位置が一番上じゃないバグへの対処法

はじめに

本ブログをNuxtからNextにリプレイスしました。

その中で、next/linkのリンクから、動的ルーティングのページに遷移したときに、スクロール位置が本当は一番上に戻って欲しいのに、中途半端な位置になってしまうバグにハマりました。

自分へのメモも兼ねて、記事に残します。

cssの中にoverflow系のものがあれば、消してみましょう。

next/linkは、Next.jsにおけるページ遷移のためのリンクを提供する機能です。

このPropsには、scrollなるものが含まれおり、これをtrueにすると、ページ遷移後に一番上までスクロールしてくれます

そもそもReactでは、DOMを書き換えてページを更新しているために、何もしなければ、スクロール位置はそのままです。なので、わざわざ一番上までスクロールしてもらう必要があるのですね。

しかし、このPropsのscrollは、デフォルトでtrueらしいのです。なぜ、一番上までスクロールしてくれないことがあるんだああああ

ネットの海をさまようこと２時間、 NextのGithubのIssueに答えはありました。やはり公式は神なのか。 https://github.com/vercel/next.js/issues/7594

overflow系のcssプロパティがついている要素で、ページがラッピングされていると、heightを正しく計算できないために、スクロールに失敗するということでした。

vscodeの検索欄に「overflow」と入力しました。検索結果は０件でした。なんとか探しまわった結果、tailwindベースのdaisyuiが犯人であることがわかりました。

今回はdaisyuiを使って、スマホ用のナビゲーションドロワーを実装していたのですが、その中にoverflow-y: autoの文字が。。

泣く泣くdaisyuiでの実装から、tailwindだけでの実装に書き直したのでした。

もう一生解決できないのではないかと、あきらめかけていました。でも最後の砦はやっぱり、Githubなのですね。

問題解決能力がちょっとだけ上がった気がしました。