【Next.js】ビルド時エラー：ReferenceError: window is not definedの原因と対処法

Next.jsで開発中のヘッドレスCMSをnpm run buidした際に下記エラーが発生。

ReferenceError: window is not defined

自分が書いたコードを確認したものの原因の特定ができずにいたのですが、最終的にはライブラリが原因でした。

環境

• Next.js　15.1.5
• React　19.0.0

ReferenceError: window is not definedの原因

サーバー側（SSRやSSGの際）で window オブジェクトを参照していることが問題

ReferenceError: window is not definedの対処法

対象ファイルを探す

windowを使っているファイルを探す。プロジェクトディレクトリにて下記コマンドを実行（macの場合）

grep -rnw './' -e 'window'

コードを修正する（あるあるver）

通常は下記で対応する

• useEffect 内で window を使う
• typeof window !== "undefined" をチェック

それぞれコードサンプルを下記に記載

import { useEffect, useState } from "react";

export default function MyComponent() {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  return <div>Window width: {width}</div>;
}

if (typeof window !== "undefined") {
  console.log(window.innerWidth);
}

コードを修正する（今回ver）

めちゃくちゃ探したけど怪しい箇所が見つからず、最終的に利用しているライブラリが原因だったことが判明しました・・・！

react-datepicker など、一部のライブラリは window に依存している場合があるらしい。

対処法としては、next/dynamic を使ってクライアントサイドのみでロードすればok◎

import dynamic from "next/dynamic";

const DatePicker = dynamic(() => import("react-datepicker"), { ssr: false });

export default function MyComponent() {
  return <DatePicker />;
}

ちなみに今回は、スクロールアニメーション実装のために利用していたwow.jsが原因でした。

ひとこと

自分が書いたコードのどこかに原因があるはず・・・！と血眼で探しましたが見つからないわけです🥺

ライブラリが原因だったとは、考えてみればわかりそうなものですがたどり着くまでに時間がかかってしまいました。