【 エンジニアハック、エラー解決】Next.jsでブラウザ側の処理を記載する方法

■事象

Next.jsで、ブラウザ側にしか存在しないグローバルオブジェクトのwindowやdocumentを参照しようとすると、

“document is not defined.”

のエラーが表示されてしまう。

（例．window.innerHeight）

■解決策

if文でブラウザ側の処理を明記すれば良い。

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

■参考

Window is not defined in Next.js React app

In my Next.js app I can't seem to access window: Unhandled Rejection (ReferenceError): window is not defined componentWillMount() { console.log('window.in...

stackoverflow.com

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

Next.jsで"document is not defined." "window is not defined."のエラーが出たときの対処法 原因 Next.jsのSSRが原因である可能性が高いです。 SSR = S...

qiita.com