[Next js] ReferenceError: localStorage is not defined

CSR만 하던 나는,, Next 코드를 짜던 도중 충격적인 에러를 발견했다.

ReferenceError: localStorage is not defined

두둥.. 로컬스토리지가 정의되지 않았다니?!

문제

생각해보니 당연했다.

Next js에서 SSR을 의도했으면, server render 가 client render 보다 먼저 되기 때문에 localStorage를 못찾는것!

해결하기

로컬스토리지에 접근 가능할 때(=페이지가 mount 되기 전)까지 기다려야한다.

if (typeof window !== 'undefined') {
  // 로컬스토리지가 들어간 코드
}

이 조건문으로 해결할 수 있다!
로컬스토리지가 있을때만 실행하라는것.

useEffect를 쓸 수도 있겠다.

import { useEffect } from "react";

useEffect(() => {
    // 로컬스토리지가 들어간 코드
}, [])

참고자료