ReferenceError: window is not defined

Next.js는 리액트 프레임워크로 프리랜더링을 지원하여 SEO 최적화와 성능 개선을 위해 HTML을 먼저 생성한다. 그래서 window를 참조하는 이벤트를 사용하면 에러가 발생 할 수 있다.

window 참조 오류 해결 법

• typeof 연산자 : window 객체가 존재하는 지 판단 하는 방법

클라이언트에서 렌더링 할 때까지 기다렸다가, window를 참조할 수 있는 시점에 코드 실행

if (typeof window !== "undefined") {
  // window 객체를 사용하는 코드
}

// 블로그에서 사용된 코드
const [scrennWidth, setScrennWidth] = useState(
   typeof window !== "undefined" ? window.innerWidth : 0
 );

 

• next/dynamic : 페이지 컴포넌트를 동적으로 불러오는 방법

window를 참조한 컴포넌트를 동적으로 불러와서 문제를 해결할 수 있다.

ssr: false 옵션을 사용하면 Server-Side에서 해당 컴포넌트를 불러오지 않고, Clinet-Side에서 렌더링할 때만 불러와서 오류가 발생하지 않는다.

import dynamic from "next/dynamic";

const DynamicComponentWithNoSSR = dynamic(() => import("@/components/windowContain"), { ssr: false });

 

• useEffect Hook

useEffect는 렌더링 이후에 호출되어 클라이언트 사이드에서만 동작하여 오류가 발생하지 않는다.

useEffect(() => {
	// 여기서 window or document 객체에 접근
	const innerHeight = window.innerHeight 
},[])