[에러] ReferenceError: localStorage is not defined

Next.js 프로젝트에서 빌드를 했더니 다음과 같이 에러가 떴다.

localStorage의 userType을 가져와 분기처리를 할 일이 있었는데 그 때 localStorage에서 값을 가져오면서 에러가 발생한 듯 보였다.

에러가 발생한 이유

• Next.js는 client-side를 렌더하기 전 server-side 렌더를 수행
• Next.js에서 제공하는 SSR에서는 window, document 와 같은 브라우저 전역 객체 사용 불가능
• window 객체는 client-side에만 존재
• 결과적으로, 페이지가 client에 로드되고 window 객체가 정의될 때까지 localStorage에 접근 불가!

해결 방법

1. typeof window !== 'undefined' 사용

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

  const localboxCreatorType =
    typeof window !== 'undefined'
      ? localStorage.getItem('localboxCreatorType')
      : null;

// 혹은 
if (typeof window !== 'undefined') {
  const localboxCreatorType = localStorage.getItem('localboxCreatorType');
}

2. useEffect 사용

• useEffect는 렌더링 시 실행되므로, 초기 서버 빌드 시 useEffect 내부 코드는 실행 x
• useEffect는 client-side에서만 실행되므로 localStorage에 안전하게 접근 가능

import { useEffect } from "react";

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

참고

• https://velog.io/@qhflrnfl4324/%EB%82%91%EA%B9%A1%ED%8C%9C08-js-cookie