Next.js)document is not defined 에러 발생 원인 (window is not defined)

Next.js를 처음 개발하다보면 window나 document를 사용했을 때 다음처럼 에러를 마주한 적이 있을 것이다.

-> document is not defined
-> window is not defined

리액트에서는 잘작동하던 자바스크립트언어가 왜 Next에서는 에러를 발생시킬까?

그 이유는 Next.js는 기본적으로 SSR(서버 사이드 렌더링)을 지원하기 때문이다.

document, window는 클라이언트 측에서만 정의되는 전역 변수인데 서버에서 렌더링하는 Next.js에서는 당연히 document와 window를 정의할 수 없는 것이다.

그렇다면 어떻게 사용해야 할까?

📌 if문으로 체크하기

첫 번째 방법은 정말 간단하게 if문으로 document나 window가 존재하는지 체크하는 것이다.

  let location;

  if (typeof document !== "undefined") {
    location = document.location;
  }

📌 useEffect 사용하기

두 번째 방법은 useEffect를 사용한 방법이다.

  const [test, setTest] = useState() as any;
  useEffect(() => {
    const { location } = document;
    setTest(location);
  }, []);
  console.log(test);