Next13에서 Toast UI를 사용해보자.

1. 라이브러리 설치

yarn add @toast-ui/react-editor

 

 

2. 에디터 컴포넌트 만들기 (중요!!!)

 

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

export default function BoardWrite(): JSX.Element {
  return (
    <Editor
      //   ref={contentRef}
      //   onChange={onChangeontent}
      initialValue="typing here!"
      previewStyle="vertical"
      height="100%"
      initialEditType="markdown"
      useCommandShortcut={false}
      hideModeSwitch={true}
    />
  );
}

toast UI에서는 ssr을 지원하지 않기 때문에

 

에디터 컴포넌트를 만든 후 

서용하는 곳에서 다음과 같이 dyanmic을 써줘야 한다.

 

 

import dynamic from 'next/dynamic';
const ToastEditor = dynamic(() => import('@/src/components/Write/editor'), {
  ssr: false,
});

만약 dynamic을 사용하지 않으면

error: self is not defined 이라는 에러를 계속 만나게 될 것이다.

 

 

그런데!!!!!!!!!!!!! 이건 이전 Next 버전이고.......

13.4.5 버전에서는 다음과 같이 사용해야한다.

 

'use client';
import React from 'react';
import { Editor } from '@toast-ui/react-editor';

export default function BoardWrite(): JSX.Element {
  return (
    <Editor
      //   ref={contentRef}
      //   onChange={onChangeontent}
      initialValue="typing here!"
      previewStyle="vertical"
      height="100%"
      initialEditType="markdown"
      useCommandShortcut={false}
      hideModeSwitch={true}
    />
  );
}

 

에디터를 클라이언트 컴포넌트화 해서 사용해야 에러가 안난다...!

넥스트 업데이트가 최근에 이뤄져서 레퍼런스가 많이 없는데 내가 미리미리 기록해놔야지 헤헤

 

+) import '@toast-ui/editor/dist/toastui-editor.css';

이 부분에서 계속 에러가 나서 일단 지워놨는데 토스트 버전이 바뀌어서 그런가? 찾아보고 추가 예정

 

=> 해결!

/*tsconfig.json*/

"includes" : ["**/*.css"]

tsconfig 파일 안에 css 파일도 인클루드 하도록 추가해주면 됩니당!