window is not defined 발생 오류

문제

다크모드를 구현하는 중 localStorage를 사용해야 하는 부분에서 'window is not defined'라는 오류가 발생했다.

원인

Next.js는 server-side에서 먼저 실행이 되고, 그 후에 client-side에서 실행이 된다.

window는 client-side에만 존재하기 때문에 발생하는 오류다.

해결

이를 해결하기 위해서는 componentDidMount 코드 내에 작성해야 한다고 한다.

Window is not defined in Next.js React appStack Overflow

그래서 나는 함수형 컴포넌트이기 때문에 useEffect 내에 localStorage 관련 코드를 작성해 주었다.