Problem Definition

Next.js에서 Web Storage를 사용하는 과정에서 콘솔 창에 다음과 같은 Error가 발생했다.

ReferenceError: sessionStorage is not defined

Resolution

CSR (Client Side Rendering) 작업에 익숙한 경우 서버에서 localStorage 에 액세스할 수 없는 경우가 발생할 수 있다.

이는 localStorage 가 window 객체에 정의되어 있지 않고 Next.js 가 클라이언트 사이드 렌더 전에 서버 사이드 렌더를 수행하기 때문이다.

따라서 이러한 문제를 해결하기 위해 window 객체의 존재 유무를 확인하고 window 함수에 접근하는 방식으로 에러를 해결했다.

아래는 기존 에러코드 및 해결코드이다.

Error Code

const accessToken = localStorage.getItem('token');

Solution Code

// window 객체 존재여부를 확인한 뒤 접근
const accessToken = typeof window !== 'undefined' ? localStorage.getItem('token') : null;