[Next.js] 다이나믹 임포트(dynamic import)

문제점

import ReactQuill from "react-quill";

const WebEditorPage = (): JSX.Element => {
  const onChangeContents = (): void => {
    console.log("에디터입니다.");
  };

  return (
    <>
      <form action="">
        작성자 <input type="text" />
        <br />
        비밀번호 <input type="password" />
        <br />
        제목 <input type="text" />
        <br />
        내용: <ReactQuill onChange={onChangeContents} />
        <button>등록하기</button>
      </form>
    </>
  );
};

export default WebEditorPage;

웹에디터 라이브러리인 react-quill을 사용하기 위해 react-quill을 import 시키고 코드에 적용해 보았다. 그런데 브라우저에서 다음과 같은 에러가 떴다.

어디선가 많이 본 에러이다. 그렇다 Next.js가 서버사이드 렌더링을 하는 과정에서 pre-rendering을 할 때 window 또는 document object가 선언되어 있지 않기 때문에 발생하는 에러이다.

이러한 문제를 해결하기 위해 documnet가 선언된 이후에 react-quill을 import 해줘야 한다. 이는 Next.js의 dynamic import 방식을 사용하면 된다.

dynamic import 적용

import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";

const ReactQuill = dynamic(async () => await import("react-quill"));

const WebEditorPage = (): JSX.Element => {
  const onChangeContents = (): void => {
    console.log("에디터입니다.");
  };

  return (
    <>
      <form action="">
        작성자 <input type="text" />
        <br />
        비밀번호 <input type="password" />
        <br />
        제목 <input type="text" />
        <br />
        내용: <ReactQuill onChange={onChangeContents} />
        <button>등록하기</button>
      </form>
    </>
  );
};

export default WebEditorPage;

문제 해결

dynamic import를 적용하면 정상적으로 작동하는 것을 확인할 수 있다.