Next.jsで"document is not defined." "window is not defined."のエラーが出たときの対処法

原因

Next.jsのSSRが原因である可能性が高いです。

本来クライアント（ブラウザ）側でしか動かないJSフレームワークなどによるレンダリングをサーバー側で行うことによって、初期表示時の高速読み込みや検索エンジン最適化（SEO）を向上するもの。

サーバー側でJSの処理を実行しようとしているときに、ブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照しようとすると、標題のエラーが起こります。

componentDidMount()内に書いた処理は、基本的にcomponentがmountされた後にクライアント側のみで起こる処理なので、このエラーは起こらないようです。

ただ、componentDidMount()はクラスコンポーネントのライフサイクルメソッドなので、関数コンポーネントでは使えません。

React Hooksが主流の現在、こちらの方が汎用性が高いです。

ssr1.js

if (process.browser) {
  // windowやdocumentを使う処理を記述
}

もしくはシンプルに：

ssr2.js

if (typeof window !== "undefined") {
  // windowを使う処理を記述
}

（コメントでのご指摘・編集リクエストを受けて修正）

Why not register and get more from Qiita?

We will deliver articles that match you
By following users and tags, you can catch up information on technical fields that you are interested in as a whole
you can read useful information later efficiently
By "stocking" the articles you like, you can search right away

Improve article

Article information