TIL 23.09.15 Next.js deploy 에러 window is not defined

https://handhand.tistory.com/272

[Next.js] window is not defined 원인 및 해결방법

 

next.js 로 개인프로젝트 하면서 vercel 로 배포했는데 아니나 다를까 바로 배포되지 않았다.. 

내용은 window is not defined.

내가 scroll 효과를 주려고 window 객체를 쓰는 곳이 몇 군데 있었는데, 이걸 custom hook 으로 만들어 관리하다 보니까 에러가 났다. Next.js 에서 서버사이드 렌더링을 할 때, 페이지를 처음 렌더링 할때는 window 나 document 전역 객체가 없어서 생기는 현상임.

 

"use client";

import React, { useEffect } from "react";
import { useState } from "react";

const useIsScroll = () => {
  const [isScroll, setIsScroll] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      setIsScroll(window.scrollY);
    };
    window.addEventListener("scroll", handleScroll);

    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return isScroll;
};

export default useIsScroll;

 

나는 위 블로그에서 3번 방법을 사용했다.

해당 커스텀 훅이 사용된 컴포넌트를 dynamic 하게 불러온 후 사용하니 에러가 사라지고 정상적으로 배포되었다.

 

  const DynamicHeader = dynamic(() => import("@/app/components/Header"), {
    ssr: false,
  });