Next js에서 sessionStorage is not defined 문제 해결 방법

 

개발 중에 발견한 문제에 대한 해결책을 간단하게 적어두려 한다.

 

우선 Next Js는 SSR이라는 점을 꼭 기억해야 한다!!

 

무턱대고 sessionStorage 혹은 localStorage (그 외 window 함수..)를 사용하려고 하면 다음과 같은 에러메시지를 발견할 것이다.

 

ReferenceError: sessionStorage is not defined

 

발생하는 이유를 간략하게 설명한다면...

 

CSR (Client Side Rendering) 작업에 익숙한 경우 서버에서 localStorage에 액세스할 수 없는 경우가 발생할 수 있다. 이는 localStorage가 `window` 객체에 정의되어 있지 않고 Next.js가 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문이다.

 

 

 

 

따라서 이러한 문제를 해결하기 위해서는 window 객체의 존재 유무를 살피고 window 함수에 접근한다면 에러메시지가 발생하지 않을 것이다.

 

// 이와 같이 접근할 경우 에러메시지가 발생한다.
const accessToken = sessionStorage.getItem('accessToken');

// window 객체가 존재하는지 확인하고 접근할 경우 정상적으로 접근된다.
const accessToken = typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null;

 

그리고 위 방법 이외에도 useEffect에서 window 객체에 접근하면 에러가 발생하지 않는다. 간단하게 설명하자면 useEffect는 클라이언트 사이드의 함수이기 때문이다.

 

따라서 두가지 방법중 상황에 맞게 선택하여 사용하면 될 듯 하다...!

 

 

 

 

 

 

Next.js 를 사용한 개발이 미숙하다보니 아직은 좀 더 익숙해져야 할 것 같다.

 

강해지고싶다...!!