Next.js에서 class 컴포넌트 사용시 window undefined 에러

[HojinAn]

새로 적용 중인 apexCharts 라이브러리가 기본적으로 class 기반의 컴포넌트로 구성되어 있는데, 이를 Next.js에서 적용 시 Server side에서 window를 참조할 수 없다는 에러를 발생시킵니다.

[SunNacho]

찾아보니 next.js에서는 처음 렌더링 때 window 객체가 존재하지 않아서 발생하는 오류라는데, 그러면 렌더링 이후에 호출 되는 useEffect 같은 걸 사용하면 되려나요? typeof window !== 'undefined' 같은 식으로요 라이브러리를 활용하는 거라 잘 안될 수 도 있지만 그냥 한번 생각해봤어요..

[HojinAn]

찾아보니 next.js에서는 처음 렌더링 때 window 객체가 존재하지 않아서 발생하는 오류라는데, 그러면 렌더링 이후에 호출 되는 useEffect 같은 걸 사용하면 되려나요? typeof window !== 'undefined' 같은 식으로요 라이브러리를 활용하는 거라 잘 안될 수 도 있지만 그냥 한번 생각해봤어요..

8a79953으로 해결했는데요
https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app에서도 볼 수 있듯이 말해준 것처럼 useEffect로 해결 가능한데, next의 dynamic import를 이용하면,

1. 해당 문제를 해결할 수 있을 뿐만 아니라
2. lazy loading을 통한 빠른 초기 렌더링에 이점이 있어요

현재 채택한 axecharts의 경우 매우 큰 용량으로 그냥 import시 초기 렌더링을 저하시키는 요소가 될 위협이 있어서 dynamic import로 해결했습니다 :)