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

📌 새로고침 시 오류 페이지가 떠요!

현재 회사에서 Next.js 를 이용한 프로젝트를 진행하고 있는데

특정 페이지에서 새로고침을 하거나 URL 을 통해 직접 접근을 시도할 경우

에러가 발생하며 에러 페이지로 리다이렉션되는 이슈가 있었습니다.

 

📌 오류 발생 원인은?

해당 페이지에서는 custom hook 을 사용하고 있었는데 여기서 문제가 발생한 것이었습니다.

💡 문제가 된 custom hook

다음은 이번에 문제를 일으킨 주범인 custom hook 의 간단한 예시입니다.

export default const customHook = () => {
    const [flag, setFlag] = useState(Number(localStorage.getItem(countKey) || '0'))

    // 몇가지 작업들 ...

    return [flag, setFlag]
}

Next.js 에서 SSR 을 할때 페이지를 처음 렌더링하는 과정에서는

window 나 document 전역 객체가 존재하지 않습니다.

위의 경우 window 객체의 로컬 스토리지에 접근하고있기 때문에 undefined 참조 오류가 발생하게됩니다.

 

📌 window 참조 오류 해결하기

1️⃣ typeof 연산자

첫번째 방법은 window 객체가 존재하는지 판단하는 것입니다.

위 예제에 이 방법을 적용하면 다음과 같이 코드를 바꿀 수 있습니다.

const [flag, setFlag] = useState(
    typeof window !== 'undefined'
      ? Number(localStorage.getItem(resurrectionCountKey)) || 0
      : 0,
)

2️⃣ useEffect Hook

그 다음 방법은 useEffect 를 이용하는 것입니다.

useEffect 는 렌더링 이후에 호출되기 때문에 오직 클라이언트 사이드에서만 동작함을 보장할 수 있습니다.

따라서 안전하게 전역객체에 접근이 가능합니다.

useEffect(() => {
    /** 여기서 window 혹은 document 객체에 접근하기 */
}, [])

3️⃣ next/dynamic

Next.js 는 ES2020 의 dynamic import 를 지원합니다.

ssr: false 옵션을 사용하면 SSR 없이 컴포넌트를 동적으로 불러올 수 있습니다.

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('@/components/hello'),
  { ssr: false }
)

문제가 된 custom hook 을 사용하는 컴포넌트를 위 방법을 이용해 동적으로 불러온다면

브라우저에서만 동작할 수 있는 코드를 문제없이 사용할 수 있습니다.

 

📌 참고자료

Advanced Features: Dynamic Import | Next.js