[Nextjs] Error: localStorage is not defined

서버 사이드 렌더링(SSR)을 지원하는 Next.js의 특성 때문에 발생하는 문제로, 간단하게 이해하고 해결하는 방법을 공유하겠습니다.

1. Error: localStorage is not defined

발생 원인

이 오류는 Next.js의 서버 사이드 렌더링 때문에 발생합니다. 코드가 서버에서 실행될 때 localStorage는 브라우저 환경에서만 사용 가능한 API이기 때문에 서버에서는 접근할 수 없습니다.

해결 방법

typeof window !== 'undefined'를 사용하여 페이지가 마운트될 때까지 기다렸다가 localStorage에 접근하도록 합니다.

if (typeof window !== 'undefined') {
  localStorage.getItem('~~~');
}

✅ 참고

• [NextJS] localStorage 에러핸들링 -localStorage is not defined-_hyo