Nextjs에서 로컬 스토리지가 undefined인 이유? Nextjs Server Error : localStorage is not defined

발생 원인

클라이언트 사이드 어플리케이션으로 작업하는 데 익숙하다면 localStorage를 서버에서 액세스할 수 없다는 사실이 놀라울 수 있습니다.

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

따라서 페이지가 클라이언트에서 로드되고 window 객체가 정의될 때까지 localStorage에 액세스할 수 없습니다.

해결

컴포넌트 내부에 부수 효과를 처리하는 useEffect에서 localStorage에 액세스하는 방식으로 해결합니다.