Next js Recoil effects로 전역 상태관리시 window is not defined 에러

Question

Nextjs에서 recoil로 전역 상태 관리를 하고 있는데요. 새로고침 시 recoil atom의 값이 날라가는 것을 방지하기 위해 Recoil effects로 값을 로컬스토리지에 넣어 관리하고자 했습니다. 그런데, Nextjs는 기본적으로 SSR을 하기 때문에 window is not defined에러를 만나게 됐습니다. const localStorage &#61; typeof window !&#61;&#61; undefined ? window.localStorage : null const localStorageEffect &#61; (key: string) &#61;> ({ setSelf, onSet }: any) &#61;> { const savedValue &#61; localStorage && localStorage.getItem(key) if (savedValue !&#61; null) { setSelf(JSON.parse(savedValue) || initialUser) } onSet((newValue: string, _: any, isReset: boolean) &#61;> { isReset ? localStorage && localStorage.removeItem(key) : localStorage && localStorage.setItem(key, JSON.stringify(newValue)) }) } export const currentUser &#61; atom<User>({ key: &#96;currentUser/${v1()}&#96;, default: initialUser effects: [localStorageEffect(&#96;currentUser&#96;)] }) 이 부분을 해결하기 위해 전 다음과 같은 방법을 썼는데요SSR이 끝나고 window.localStorage에 접근하도록 조건문 추가const localStorage &#61; typeof window !&#61;&#61; undefined ? window.localStorage : null 그냥 쓸 땐 local에 값도 잘 들어가고 관리되지만, 새로고침을 하면 여전히 window is not defined 에러가 뜹니다.그래서 SSR이 필요 없는 컴포넌트의 경우 next/dynamic 을 써볼까 했지만, 그러면 Next.js를 쓰는 의미가 퇴색되서 고민입니다. 지금 위 문제는 함수에서 발생한 거라 useEffect는 사용할 수 없습니다. 혹시 해당 에러를 피할 수 있는 다른 방법이 있을까요?

worker ant · Accepted Answer

이거...무조건 true입니다.undefined를 &#34;undefined&#34;로 변경하셔야 합니다.(typeof 결과는 항상 string입니다) typeof window !&#61;&#61; undefined

Next js Recoil effects로 전역 상태관리시 window is not defined 에러

1개의 답변

#recoil 목록