Next
Editor
- 기존에 사용했던 에디터에 대해 몰랐던 부분을 끄적여보기
Next.js에서 에디터를 사용할 때,dynamic(...)이라는 코드를 사용했었다.- 돌아다니는 코드를 쉽게 긁어왔고,
dynamic에 대해서 동적으로 자바스크립트 모듈을 가져와서 사용하고, 성능 개선 등에 관한 내용만 간단하게 훑어보고 사용해왔는데, 추가적으로 서버 사이드 렌더링에 대한 옵션을 끄고 사용한다는 것을 몰랐기에 적어본다. Next.js에서 에디터 라이브러리를 직접import해서 사용한다면window is not defined, document is not defined...라는 에러를 마주할 것이다.- 에디터 라이브러리는 브라우저 객체(window, document)를 참조하기 때문에, 브라우저 객체가 있는 클라이언트 사이드에서만 작동한다.
Next.js는 서버 사이드로 작동하기 때문에, 각 페이지들을 빌드 시 미리 렌더링한다.- 이때, 실행 환경은 브라우저가 아니라 node이기 때문에, 발생하는 클라이언트 사이드 에러이다.
- 따라서, 기본적으로 작동되는 서버사이드 렌더링 옵션을 끄고 동적(dynamic)으로 import 해야한다.