Nextjs - localStorage is not defined

 

클라이언트 전용 애플리케이션으로 작업하는 데 익숙하다면

서버에서 localStorage에 액세스할 수 없다는 사실이 의외로 느껴질 수도 있다.

이는 localStorage가 window 객체에 정의되어 있지 않고 Next.js가 클라이언트 렌더링 전에 서버 렌더링을 수행하기 때문에 발생하는 이슈이다.
 즉, 클라이언트에서 페이지가 로드되고 window 객체가 정의될 때까지 localStorage에 액세스할 수 없다는 의미이다.

따라서 window가 브라우저에 마운트 되었을때만 웹스토리지를 세팅하도록 코드를 변경하면 된다.

 

view(string) 에 따라서 화면에 보여지는 UI가 달라진다. (list <-> kanban)

export const useViewName = () => {
  const view = useRecoilValue(ViewStore)
  const [viewName, setViewName] = useState(view)

  useEffect(() => {
    setViewName(getViewName())
  }, [view])

  const getViewName = () => {
    if (typeof window !== "undefined") {
      //window 객체가 정의되어 있을 때만 내부 로직 실행
      return window.localStorage.getItem("view") || "list"
    } else {
      return "list"
    }
  }
  return viewName
}