Nextjs에서 Quill Editor 적용하기

서버사이드렌더링을 위한 프레임워크인 Nestjs를 사용해서 프로젝트를 시도해서 개발중이다.🙄

물론 처음이니까 아직 Nextjs를 안다기보단 겉햙기 중인데, 워낙 도큐멘트나 깃에 정리가 잘 되어있는 편이라 조금씩 읽어보면서 셋팅 및 개발해보고 있다.

이번 프로젝트에서 에디터 적용이 필요한 경우여서, 여러 개를 서칭해봤는데 React와 Quill Editor를 많이 사용하고 있는 것 같아서 선택하게 되었다. (summernote만 해본자,,,, 🧐)

 

허나, 서버사이드렌더링이란 특징때문에 그대로 Quill을 적용하게 되면 아래와 같이 document is not defined라는 에러가 발생하게 될 것이다.

 

그래서 해결한 소스는 아래와 같다!

Next.js는 JavaScript 용 ES2020 dynamic import() 을 지원하는데, 이건 모듈을 동적으로 import할 수 있도록 한다. (자세한 내용 : dev.to/nialljoemaher/dynamic-importing-code-splitting-es2020-3dm3)

Quill Editor를 서버 측에 모듈을 포함하지 않도록 하고 브라우저에서만 작동하도록 하는 방법이다.

{ssr : false} 로 셋팅하면되고, 로드되는 동안의 상태를 렌더링할 수 있든 loading 함수도 설정할 수 있다.

아래와같이 작성하여 만든 quill컴포넌트를 원하는 페이지에 임포트해서 사용하면된다.

import dynamic from 'next/dynamic'

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
})

const modules = {
  toolbar: [
    [{ header: '1' }, { header: '2' }, { font: [] }],
    [{ size: [] }],
    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
    [
      { list: 'ordered' },
      { list: 'bullet' },
      { indent: '-1' },
      { indent: '+1' },
    ],
    ['link', 'image', 'video'],
    ['clean'],
  ],
  clipboard: {
    // toggle to add extra line breaks when pasting HTML:
    matchVisual: false,
  },
}
/*
 * Quill editor formats
 * See https://quilljs.com/docs/formats/
 */
const formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'list',
  'bullet',
  'indent',
  'link',
  'image',
  'video',
]

export default function Home() {
  return <QuillNoSSRWrapper modules={modules} formats={formats} theme="snow" />
}

 

물론 _app.js에는 quill 스타일 import는 필수이다!

import 'react-quill/dist/quill.snow.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp