1. ReferenceError: window is not defined

페이지 안에 window 객체를 참조할 수 없다고 한다.

    const DogsPage = () => {
        const testResult = window.localStorage.getItem("test-result");

        if (testResult === null || testResult === "undefined") {
        	router.replace("/");
        }

 

Next.js 는 getServerSideProps 를 사용하지 않더라도, 기본적으로 SSR을 사용하여 통해 pre-render 하는 기본적인 동작방식을 가지고 있다.

 

Next.js 를 pre-render 할때, HTML 을 생성한 다음, 클라이언트로 보낸다.

이때 사용자가 페이지를 방문하면 HTML 을 로드한 다음 수화(페이지가 상호작용 할 수 있도록 React 를 실행하는 프로세스) 하게된다.

 

이때, 코드 안에 window 객체를 사용하려 한다면

window 객체의 참조 요청이 서버에 직접적으로 전달되고,

Next.js 는 pre-render를 할때 window 객체가 없는 상태로 pre-render를 하기 때문에,

초기렌더링이 끝나기도 이전에, window 객체를 참조하게 된다면

이는 참조 오류가 발생하게 되는것이다.

 

따라서 이를 해결하기 위해서 window 객체를 참조하는 것은, 초기렌더 이후로 해야하며

useEffect를 사용하는 것이 매우 효율적이다.

 

const DogsPage = () => {
    const router = useRouter();

    useEffect(() => {
        const testResult = window.localStorage.getItem("test-result");

        if (testResult === null || testResult === "undefined") {
            router.replace("/");
        }
    }, []);