Nextjs에서 localStorage is not defined 해결하기

Nextjs에서 localStorage를 사용하다 보면 종종 아래와 같은 에러가 발생하곤 합니다.

ReferenceError: localStorage is not defined

저도 이러한 에러를 마주한 적이 있었는데요.
이러한 에러가 야기되는 이유는 Nextjs의 렌더링 순서에서 알아볼 수 있습니다.
Nextjs에서는 client-side 렌더를 수행하기 전에 server-side 렌더를 수행합니다.
그렇게 server-side에서는 전역 객체(window, document)를 사용할 수 없게 되고
이 때문에 server-side에서는 window 객체를 찾지 못하고 위와 같은 에러를 발생 시킵니다.

해결하기

보통 해결을 할 때에는 대표적으로 두가지 방법이 제시됩니다.

1. window 객체의 존재 유무 살피기

if (typeof window !== 'undefined') {
  localStorage.getItem('token');
}

와 같이 코드를 작성해주면 if 문으로 인해 window 객체가 존재할 때만 localStorage에 접근할 수 있게 되고
따라서 에러를 해결할 수 있게 됩니다.

2. useEffect

useEffect(() => {
  const token = localStorage.getItem('token')
}, [])

useEffect는 CSR 전용 이벤트이기 때문에 client-side에서만 실행되므로
useEffect를 사용하는 것도 쉽고 안전하게 localStorage에 접근할 수 있게 됩니다.