Next.jsでページ遷移するとTypeError: Cannot read properties of null (reading 'offsetTop')が出てしまう

Question

いつもお世話になります。

javascriptとnext.jsを勉強しているのですが、
行き詰まってしまっているので教えてください。

トップページにて
「コンテンツ位置までスクロールすると画像がフェードインする」
という処理を入れているのですが、次のページに遷移した際に、

TypeError: Cannot read properties of null (reading 'offsetTop')

  14 | const topHeight = window.scrollY
  15 | const element = document.getElementById('content')
> 16 | const contentOffsetTop = element.offsetTop
     |                                 ^
  17 | if (topHeight > contentOffsetTop - 500) {
  18 |     isHideContentImage = false
  19 |     showLeftImage(isHideContentImage)

というエラーが出てきてしまいます。
毎回発生するというわけではなく、
トップを開いて1スクロールしてすぐに次へのリンクを押したときにエラー発生する時があります。

以下が作成したスクリプトになります

export default function Home() {

    const [isHideContentImage, showContentImage] = useState(true)
    const imageStyle = isHideContentImage ? `${Style.image}` : `${Style.image} ${Style.show}`;

    const ShowImage = () => {
        const topHeight = window.scrollY
        const element = document.getElementById('content')
        const contentOffsetTop = element.offsetTop
        if (topHeight > contentOffsetTop - 500) {
        	isHideContentImage = false
            showLeftImage(isHideContentImage)
        }
    }

    useEffect(() => {
        window.addEventListener('scroll', ShowImage, {passive: true});
        return () =>{
            window.removeEventListener('scroll', ShowImage)
        }
    });
    
    return (
    	<section id="content">
    		<Link href="/next-page">次のページ</Link>
            <div className={imageStyle}>
                 <img src="/images/about01.jpg" width="100%" alt=""/>
            </div>
    	</section>
    )
}

よろしくお願いします

Answer 1

解決できたと思っていたのですが、できていませんでした
解決できました

スクロールイベントが終わってない状態でページ遷移していたことが原因だと考えて、
ページ遷移開始時にスクロールイベント終了させることで対応しましたが、再度、エラーが出てしまいました

追記
returnにremoveEventListenerを追加したらエラーが出なくなりました。

useEffect(() => {
    window.addEventListener('scroll', ShowImage, {passive: true});
    router.events.on('routeChangeStart', EndEventListener)
    return () =>{
        window.removeEventListener('scroll', ShowImage); #これを追加して対応できました
        router.events.off('routeChangeStart', EndEventListener)
    }
});