概要

Next.jsでwindowなどブラウザオブジェクトにアクセスするとReferenceErrorとなってしまう。

console.log(window)
// ReferenceError: window is not defined

これはデフォルトでサーバサイドレンダリングが有効になっているからであり、if文でブラウザオブジェクトが存在するかどうかを判定することでエラーを回避することができる。

if (typeof window !== 'undefined') {
  console.log(window)
}

if文ではなく、システム全体やコンポーネント単位で無効にする方法は以下の記事にまとめてあります。

[Next.js] SSRを無効にする方法

Next.jsでSSRを無効にする方法についてまとめました。

ageo-soft.info

Tweet