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