[Next.js] window, sessionStorage, localStorageなどが使用できない原因

概要

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

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

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

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

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