🚨

【Next.js】エラー 'window is not defined' の対処

2023/07/01 に公開

この記事では、Next.js で開発する際に起きる 'window is not defined' の対処方法を 2 通り解説します。

NextJS は Server Side Rendering を前提としているため、サーバ側でもレンダリングを行います。この際、window を使おうとするとエラーになってしまいます。

ReferenceError: window is not defined

画面幅などの情報が格納されている window オブジェクトは、もちろんクライアントサイドでしか動作しないので、対処が必要です。

useEffect フックの中で　window　を使うとエラーを回避できます。これは、サーバ側では useEffect を実行しないからです。

そもそも window が undefined なのに window に対して処理をしようとすることが問題なので、window が undefined でないことをチェックすることで回避できます。

ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。