[Next.js] "window is not defined" 에러 해결

🚑 문제 상황

pages 내에서 로그인 유저 정보를 로컬 스토리지로부터 받아와야하는 상황이 있었는데 해당 에러를 마주하게 되었다. 서버사이드 렌더링(SSR)에 대한 이해가 부족했기 때문에 발생한 문제였다.

SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식으로, 서버에서 웹 페이지를 렌더링할 때 window나 document 같은 객체가 존재하지 않기 때문에 발생하는 에러이다.

🔧 해결 방법

1. typeof 사용

해결 방법은 여러 가지가 있지만 typeof를 사용해서 간단하게 해결할 수 있었다.

// 사용 예 1.
const [loginUser, setLoginUser] = useState(
    typeof window !== 'undefined'
      ? JSON.parse(window.localStorage.getItem('user'))
      : null,
  );

// 사용 예 2.
if (typeof window !== 'undefined') {
  const userData = JSON.parse(localStorage.getItem('user'));

2. dynamic 사용

next/dynamic의 dynamic 모듈을 이용해 컴포넌트의 SSR 설정을 끌 수도 있다.
브라우저의 로컬 스토리지에 접근해야 하는 컴포넌트를 불러올 때 이런 식으로 사용하면 될 것 같다.

아래는 공식 문서의 예제이다.

import dynamic from 'next/dynamic'

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

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

🔖 참고

https://nextjs.org/docs/advanced-features/dynamic-import

https://velog.io/@taese0ng/Next.js-window%EA%B0%9D%EC%B2%B4%EA%B0%80-%EC%97%86%EB%8B%A4%EA%B3%A0%ED%95%A0%EB%95%8C