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


【1つ新しい記事】

【1つ古い記事】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です