Masayan tech blog.

  1. ブログ記事一覧>
  2. Next.jsでブラウザ側の処理を明示的に記載する方法

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

公開日

事象

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

"document is not defined."

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

(例.window.innerHeight)

解決策

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

if (process.browser) 
{
 windowdocumentを使う処理を記述
}

まとめ

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