Next.js에서 toast editor를 사용하자..

문제

우선 toast-ui editor는 ssr을 지원하지 않는다.

따라서 Next.js에서 toast-ui를 설치하고, import해서 사용하면 에러가 날 것이다.

해결

Next.js에서는 ssr을 하지 않게 하는 좋은 기능을 제공하는데 바로 Dynamic이다.

따라서 나는 Editor를 import하고 사용하는 부분을 컴포넌트로 따로 빼고, 그 컴포넌트에 Dynamic을 걸어주어서 에러를 해결했다.

에디터 컴포넌트를 불러오는 부모 컴포넌트

import dynamic from "next/dynamic";
// import BoardWrite from "../../components/Main/Board/Write/BoardWrite";
  const BoardWrite = dynamic(
  	() => import("../../../components/Main/Board/Write/BoardWrite"),
  	{
  		ssr: false,
  	}
  );

  export default function BoardWritePage() {
 	return <BoardWrite />;
 }

에디터를 import한 에디터 컴포넌트

// toast editor
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={onChangeContent}
    initialValue="typing here!"
    previewStyle="vertical"
    height="100%"
    initialEditType="markdown"
    useCommandShortcut={false}
    hideModeSwitch={true}
    />
  );
}

또는

라이브러리 자체를 Dynamic을 걸어줘 import를 하는 방식도 있는데, 그때는 ref를 사용할 수 없어서 forwardRef를 이용해야 한다. <= 안써본거라 걍 이 방법은 사용하지 않았음