NextJS : LocalStorage 에러 (ReferenceError: localStorage is not defined) 해결방법

 

오늘을 NextJS에서 LocalStorage 사용시 발생하는 에러에 대한 해결법을 간단히 공유해보도록 하겠습니다.

 

문제 상황

 

LocalStorage에서 값을 불러오고 저장하기 위해 아래와 같은 Util 함수를 만들어서 사용하고 있었는데요, next build 시에 아래와 같은 에러가 발생하였습니다.

 

 

문제 원인

 

문제 원인은 클라이언트 사이드가 아닌 서버사이드 렌더링 시에 브라우저의 전역객체를 사용할수 없기 때문에 발생하였습니다.

 

저는 빌드 타임에 에러가 발생했는데요, 실제로 런타임중이 아니더라도 빌드 타임에 NextJS는 Node 환경에서 코드를 실행하기 때문에 브라우저 전역객체를 사용할 수 없다고 합니다.

 

해결 방법

 

LocalStorage 유틸 함수

 

해결방법은 위와 같이 window 객체가 참조 되지 않을 경우에는 해당 코드를 실행시킬수 없도록 설정하는 것입니다.

 

`typeof window !== 'undefiend'` 를 사용하면 window 객체가 현재 접근할수 있는지 여부를 판단할수 있습니다. 

 

또는 useEffect와 같은 React 전용 훅안에서 코드를 실행시키면, 해당 코드는 클라이언트 사이드에서만 수행되므로 에러가 없이 잘 동작한다고 합니다.