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 (window) {
  // windowを使う処理を記述
}

なおundefinedを判定基準として使うことは一般的にアンチパターンとされるため、下記は避けたほうがいいと思われます。

ssr3.js

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