react-md-editor

개인 블로그를 만들면서 게시글 작성을 markdown으로 하고 싶었다. 이것저것 검색하여 react 18버전과 호환하는 에디터를 찾았다. react-md-editor를 사용했으며, Next.js 환경에서 작업했다.

install

# 일반
npm i @uiw/react-md-editor

# Next.js
npm install next-remove-imports
npm install @uiw/react-md-editor@v3.6.0

일반적인 설치로는 모듈 로드 시 에러가 발생해 Next.js는 사이트에 안내되어 있는 방법으로 설치해야 했다. 그 후 next.config.js를 수정해준다.

const removeImports = require('next-remove-imports')();
module.exports = removeImports({});

설정한 모듈이 없다면 이게 끝이지만, 기본적으로 nextConfig가 있을 것이므로, removeImports 내에 추가해준다.

/** @type {import('next').NextConfig} */

const removeImports = require("next-remove-imports")();

const nextConfig = {
	// ...options
};

module.exports = removeImports({
    ...nextConfig,
});

Usage

import type { NextPage } from "next";
import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";

const MDEditor = dynamic(() => import("@uiw/react-md-editor"), {
  ssr: false,
});

const Upload: NextPage = () => {
  const [md, setMd] = useState<string | undefined>("# Hello World");
  return (
    <div>
       <MDEditor value={md} onChange={setMd} />
    </div>
  );
};

export default Upload;

참고
Markdown Editor for React - Next.js
Next.js Example react-md-editor