[Next.js] dynamic import로 react-quill 에러 해결(ReferenceError: document is not defined)

• react-quill을 static import로 로드하면 document가 정의되지 않았다는 에러가 발생한다. 이는 react-quill이 로드되는 시점에 document가 정의되지 않았기 때문이다.

• 이 문제를 해결하기 위해 dynamic import를 사용하여 react-quill을 서버 측 모듈에 포함하지 않고 런타임에 필요한 시점에 import 할 수 있다.

• dynamic import는 모듈을 빌드 타임이 아닌 런타임에 불러오는 기능으로, 이를 통해 번들 파일을 분리하고 필요한 모듈을 필요한 시점에 로드하여 초기 로딩 성능을 향상시킬 수 있다.

• dynamic import를 적용하면 First Load JS의 사이즈가 줄어들어 페이지 초기 로딩 시간을 단축시킬 수 있다.