[Next.js] toast-ui editor v3 적용하기

Next.js 14버전에 toast-ui의 editor 3버전을 적용해보려고 한다.

install

패키지 매니저는 yarn을 사용하고 있다

yarn add @toast-ui/react-editor

node_modules에

추가됐는지 확인

사용하기

WebEditor.tsx

import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';

const WebEditor = () => {
  return (
    <Editor
      previewStyle="tab"
      height="300px"
      initialEditType="wysiwyg"
      initialValue="hello"
      useCommandShortcut={true}
      hideModeSwitch={true}
      toolbarItems={[
        ['heading', 'bold', 'italic', 'strike'],
        ['hr', 'quote'],
        ['ul', 'ol'],
        ['table', 'image', 'link'],
        ['scrollSync'],
      ]}
    />
  );
};

export default WebEditor;

작성하고 원하는 페이지에 import해보면 아래처럼 적용이 된다.

근데 아래와 같이 500에러가 나서 찾아보니

Toast UI Editor는 클라이언트 사이드에서만 실행되어야 하는 컴포넌트이기 때문에
dynamic import를 사용하여 클라이언트 사이드에서만 컴포넌트를 렌더링하도록 수정했다.
Next.js 공식문서 - With no SSR 참고

컴포넌트 import 한 페이지에 아래의 코드를 작성했더니 해결됐다.

'use client';

import dynamic from 'next/dynamic';

const WebEditor = dynamic(() => import('에디터 컴포넌트 위치'), {
  ssr: false,
});