【Next.js】ReferenceError: window is not defined を解消する方法

発生事象

ReferenceError: window is not defined

というエラーは、サーバー側でwindowオブジェクトが定義されていないために発生します。サーバーがブラウザのwindowオブジェクトにアクセスできないため、windowオブジェクトを直接参照するコードはこのエラーをスローします。

例えば以下のコードで発生します。

  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

解消方法

useEffect を使います。useState の初期値は 0 （ブラウザに依存しない値）とし、state の更新をイベントリスナーに登録します。

  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    // state を更新する関数を定義
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // ブラウザを開いたときのサイズで state を更新
    handleResize();

    // ブラウザのサイズが変わった時に state を更新するようにイベントリスナーを登録
    window.addEventListener("resize", handleResize);

    // コンポーネントがアンマウントされる時にイベントリスナーを削除する
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);