Next.jsで"document is not defined." "window is not defined."のエラーが出たときの対処法
原因
Next.jsのSSRが原因である可能性が高いです。
SSR = Server Side Rendering
本来クライアント(ブラウザ)側でしか動かないJSフレームワークなどによるレンダリングをサーバー側で行うことによって、初期表示時の高速読み込みや検索エンジン最適化(SEO)を向上するもの。
サーバー側でJSの処理を実行しようとしているときに、ブラウザ側にしか存在しないグローバルオブジェクトのwindow
やdocument
を参照しようとすると、標題のエラーが起こります。
対策
1. componentDidMount()
内で処理を行う
componentDidMount()
内に書いた処理は、基本的にcomponentがmountされた後にクライアント側のみで起こる処理なので、このエラーは起こらないようです。
ただ、componentDidMount()
はクラスコンポーネントのライフサイクルメソッドなので、関数コンポーネントでは使えません。
2. if文で条件分岐
React Hooksが主流の現在、こちらの方が汎用性が高いです。
ssr1.js
if (process.browser) {
// windowやdocumentを使う処理を記述
}
もしくはシンプルに:
ssr2.js
if (window) {
// windowを使う処理を記述
}
なおundefined
を判定基準として使うことは一般的にアンチパターンとされるため、下記は避けたほうがいいと思われます。
ssr3.js
if (typeof window !== "undefined") {
// windowを使う処理を記述
}