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

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

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スクロールしてすぐに次へのリンクを押したときにエラー発生する時があります。

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

js
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>
    )
}