[Next.js] ReferenceError: localStorage is not defined 에러

🔥에러 내용:  ReferenceError: localStorage is not defined

Nextjs에서 localStorage를 이용하고 있었는데 갑자기 해당 에러가 생겼습니다.

그 전에는 localStorage를 사용해도 이런 에러가 나지 않았기 때문에 해당 에러의 원인을 먼저 찾아보았습니다.

🤷‍♀️Why?🤷‍♀️

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

---

✨해결 방법

1. useEffect 사용

useEffect(() => {
  localStorage.removeItem('productSearch');
}, [])

useEffect는 서버 측에서 실행되지 않고 클라이언트 측에서만 실행되기 때문에 위와 같이 사용이 가능합니다.

 

 

2. typeof window !== 'undefined' 비교

if (typeof window !== 'undefined') {
  localStorage.removeItem('productSearch');
}

window가 정의될 때 localStorage를 사용하게 하면 클라이언트 측에서 실행할 수 있게 됩니다.

 

---

🐥💬

제가 이전에 localStorage를 사용할 때는 useEffect 안에서 사용했기 때문에 에러가 나지 않았더라구요.

확실하게 알지 않고 사용하다보면 잘 되다가도 특정 상황에서 오류를 마주하게 되는 경우가 많은 것 같습니다. ㅠㅠ

앞으로도 기록을 통해 모르는 부분을 줄여나가야할 것 같습니다!