본문 바로가기

Error

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

728x90

 

 


 

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

 

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

728x90
반응형

'Error' 카테고리의 다른 글

[Error] Next.js unable to verify the first certificate error  (0) 2024.03.18
[Error] Error: NEXT_REDIRECT  (0) 2024.03.05