Next.jsを使用したウェブサイトで、ページ内スクロールを実現したいと思ったことはありませんか？例えば、ウェブサイトのナビゲーションバーに「SERVICE」や「ABOUT」のようなリンクがあり、ユーザーがそれらをクリックすると、ページ内の対応するセクションに自動的にスクロールするといった機能です。弊社の上部にあるメニューがこのページ内スクロールを実装しています。よろしければ試してみてくださいね。

まずは、実際に試してみて、その振る舞いを体験してみましょう。

react-scrollライブラリを活用しよう

このような機能を簡単に実装するためには、react-scrollというライブラリを利用するのがおすすめです。まずは以下のコマンドでインストールしましょう。

npm i --save react-scroll

そして、以下のように呼び出して使用します。

import { Link as Scroll } from 'react-scroll'

export const Nav: FC<Props> = () => { 
  return (
    <ul>
      <li>
        <Scroll to={'/#about'} smooth> About </Scroll>
      </li>
    </ul>
  ) 
}

注意しておきたいポイント

ここでのimport文では、Link as Scrollという形でエイリアスを設定しています。これは、Linkという名前がNext.jsの Linkと名前が重複してしまい、混乱を避けるためです。
そして、メニューリンクからスクロールさせたい要素への移動を設定するために、その要素にid="about"のようなIDを指定します。これにより、ページ内スクロールを簡単に実装することが可能となります。
以上がNext.jsでのページ内スクロール実装の基本的な手順です。この方法を試して、ウェブサイトのナビゲーション体験をより良いものにしましょう。