【Next.js】画面遷移時にスクロール位置が最上部に移動しない

はじめに

久しぶりの投稿です。
最近業務でNext.jsを触り始めたので、ささやかな学びを共有します。

困ったこと

画面遷移を行うUIコンポーネントを利用した際、画面遷移時にスクロール位置が画面最上部に移動しないという不具合が発生しました。

問題箇所を抜粋

今回利用したUIコンポーネントは、<Link>を用いて、コンポーネント押下時に指定した画面へ遷移する機能を提供していました。

下記、UIコンポーネントの<Link>実装部分のみを抜粋してます。

<Link className={classes} href={href} scroll={false} {...otherProps}>
  {children}
</Link>

解決策

Next.jsの公式ドキュメントによると、<Link>のscrollプロパティがfalseの場合、スクロール位置は画面最上部に移動せず、直前のページのスクロール位置を保持される仕様になっています。

今回、UIコンポーネント内の実装で<Link>のscrollプロパティがfalseとなっていたことが不具合の原因でした。
画面遷移時にスクロール位置を最上部に移動させたいので、scrollプロパティをtrue（または指定なし）にすることで、期待する動作を実現できます。

<Link className={classes} href={href} {...otherProps}>
  {children}
</Link>

// または

<Link className={classes} href={href} scroll={true} {...otherProps}>
  {children}
</Link>

参考文献