Next.js + React でページ内のスムーススクロールを実装する

html {
    scroll-behavior: smooth;
}

import AnchorLink from 'react-anchor-link-smooth-scroll'


<AnchorLink href="#hoge">Hoge</AnchorLink>
...
<div id="hoge">
 <h2>Hoge</h2>
</div>

const Page = () => {
    // seRef で要素を参照する
    const refElement = useRef();

    // useCallback を使い、refElement.current まで scrollIntoView() でスクロールする
    const scrollToSection = useCallback(() => {
        refElement.current.scrollIntoView({
          behavior: 'smooth',
        })
      }, [])

    return (
        // スクロール先を指定したいコンポーネントに onClick でセット
        <HogeComponent 
         onClick={scrollToContactSection}
         buttonLabel="hoge"
        />
        ...

        // スクロール先の div 要素に ref 属性で useRef の値を渡し要素を参照する
        <div ref={refElement}>
        ...
        </div>
    ）
}