[Next.js] localStorage 이슈

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

ReferenceError: localStorage is not defined

에러가 발생하는 이유

• Next.js는 client-side를 렌더하기 전 server-side 렌더를 수행한다.
• Next.js에서 제공하는 Server Side Rendering(SSR)에서는 window, document 같은 브라우저 전역 객체를 사용할 수 없다.
• window 객체는 client-side에만 존재한다.
  => 따라서, 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근할 수 없다.

해결 방법

typeof window !== 'undefined'

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

• 페이지가 client에 마운트될 때까지 기다렸다가 localStorage 접근해야한다.
• window 객체가 참조되지 않을 경우, undefined를 반환한다.
• localStorage 에 접근하기 전에 localStorage 가 정의된다.

useEffect

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

• useEffect는 렌더링 시 실행되므로, 초기 서버 빌드 시 useEffect 내부 코드는 실행되지 않음
• useEffect 는 client side에서만 실행되므로 localStorage에 안전하게 접근 가능
  import { useEffect } from "react";