[Error] localStorage is not defined" in Next.js

Next.js에서 localStorage를 사용하려고 할 때 다음과 같은 에러가 나타난다.

ReferenceError: localStorage is not defined

🔥 에러 발생 원인

1. Next.js 에서 제공하는 Server Side Rendering 에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없다.
2. Next.js 는 Client-side 를 Rendering 하기 전 server-side 렌더링을 수행한다.
3. window 객체는 client-side 에만 존재한다

결론은 페이지가 클라이언트에 로드되고 window 객체가 정의될 때까지 localStorage 에 접근할 수 없다.

🔥 해결방법 1) type of window !== 'undefied'

if (typeof window !== 'undefined') {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}

• localStorage 에 엑세스하기 전에 페이지가 클라이언트에 마운트될 때까지 기다려야함

🔥 해결방법 2) useEffect()

import { useEffect } from "react";

useEffect(() => {
  // Perform localStorage action
  const item = localStorage.getItem('key')
}, [])

• useEffect 는 렌더링 시 실행되므로, 초기 서버 빌드시에는 실행되지 않는다.
• useEffect 는 오직 client side 에서만 실행되므로 이때 localStroage에 안전하게 접근 가능하다.

참고 링크

https://developer.school/snippets/react/localstorage-is-not-defined-nextjs