Next.jsでブラウザ側の処理を明示的に記載する方法

事象

Next.jsで、ブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照しようとすると、

"document is not defined."

のエラーが表示されてしまう。

（例．window.innerHeight）

解決策

if文でブラウザ側の処理を明記すれば良い。

if (process.browser) 
{
　windowやdocumentを使う処理を記述
}

まとめ

いかがでしたでしょうか。本記事ではNext.jsでブラウザ側の処理を明示的に記載する方法について紹介しています。Next.jsはサーバーサイドでもレンダリングされる場合がありますのでブラウザ側の処理を記述する際には注意が必要です