[Error] nextjs localStorage is not defined error (feat. window is undefined error)

 

 

---

 

localStorage is not defined
sessionStorage is not defined

 

nextjs 에서 localStorage, sessionStorage 를 이용해서 로그인 로그아웃을 구현하려는데

localStorage is not defined error 가 발생했다

​

페이지라 클라이언트에 로드되지 않았는데, localstorage에 접근했기 때문에 발생한 에러였다.

 

​localstorage, sessionStorage는 window 안에 있는 메서드이다.

window는 브라우저 전역 객체로 서버에서는 사용할 수가 없다.

 

next.js의 경우 ssr, 즉 서버가 먼저 정의된 후 클라이언트가 정의되기 때문에 에러가 발생한다. 

 

 

typeof window !== 'undefined'

 

​따라서 if문을 통해 window의 값이 있을 때만, 해당 기능을 수행하도록하면 에러가 발생하지 않는다.

 

 

useEffect(() => {
  localStorage.getItme('key')
})

 

혹은 클라이언트 렌더링 시에만 실행되는 useEffect를 안에서 localStorage에 접근하면 에러 없이 사용할 수 있다.

 

 

window is undefined

 

마찬가지로 윈도우를 사용할 수 없다는 에러가 발생해도 위와 같은 방법으로 에러를 해결할 수 있다.