TIL | "localStorage is not defined"

Next.js에서 localStorage를 사용하려고 할 때 다음과 같은 에러가 나타납니다.

ReferenceError: localStorage is not defined

기존에는 로그인 시 localStorage에 데이터를 저장해서 로그인을 유지하는 방법을 사용하고 있었습니다.
하지만 Next.js로 리팩토링하면서 에러가 발생했습니다.

에러 발생 원인

• Next.js는 client-side를 렌더를 하기 전에 server-side 렌더를 먼저 수행하고 있습니다.
• Next.js에서 제공하는 SSR에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없습니다.
• window 객체는 client-side에만 존재하기 때문에 window 객체가 정의되지 않으면 localStorage에 접근할 수 없습니다..

해결방안

localStorage 대신 js-cookie 라이브러리로 데이터를 쿠키로 처리해 에러를 해결했습니다.

설치 방법

npm install js-cookie

사용 방법

import Cookies from 'js-cookie'

ex) Cookies.set('foo', 'bar') = localStorage.setItem('foo','bar')