🚨
【Next.js】エラー 'window is not defined' の対処
この記事では、Next.js で開発する際に起きる 'window is not defined' の対処方法を 2 通り解説します。
原因
NextJS は Server Side Rendering を前提としているため、サーバ側でもレンダリングを行います。この際、window を使おうとするとエラーになってしまいます。
ReferenceError: window is not defined
画面幅などの情報が格納されている window オブジェクトは、もちろんクライアントサイドでしか動作しないので、対処が必要です。
対処方法
対処 (1)
useEffect フックの中で window を使うとエラーを回避できます。これは、サーバ側ではuseEffectを実行しないからです。
useEffect
...
useEffect(() => {
const { innerHeight: height, innerWidth: width } = window
...
}, [])
...
対処 (2)
そもそも window が undefined なのに window に対して処理をしようとすることが問題なので、window が undefined でないことをチェックすることで回避できます。
if NOT undefined
...
if (typeof window !== 'undefined') {
const { innerHeight: height, innerWidth: width } = window
...
}
...
宣伝
ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。
カロリーを指定してメニューを選べるので、ネタで遊んでみてください！
普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！
Discussion