Notice
Recent Posts
Recent Comments
Link
프로그래밍 공부방
[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 안에서 사용했기 때문에 에러가 나지 않았더라구요.
확실하게 알지 않고 사용하다보면 잘 되다가도 특정 상황에서 오류를 마주하게 되는 경우가 많은 것 같습니다. ㅠㅠ
앞으로도 기록을 통해 모르는 부분을 줄여나가야할 것 같습니다!