Next.js에서의 toast‐ui‐editor SSR 오류 - MNC-TEAM/gugumo_frontend GitHub Wiki
nextjs에서 toast-ui-editor을 사용할때 SSR 오류가 발생하는오류가 있습니다. toast-ui-editor는 SSR을 지원하지 않기 때문입니다.
nextjs는 ssr을 지원하고 toast-ui는 ssr을 지원하지 않기 때문에 발생한 오류 입니다. toast-ui에는 ssr이 필요없기도 하고 그러므로 next.js에서 지원하는 dynamic import을 통해서 ssr 설정을 꺼줄 필요가 있었습니다.
const NoSsrWysiwyg = dynamic(() => import('./Editor'), { ssr: false })
저는 Editor의 ssr을 꺼주기 위해 따로 컴포넌트를 생성해서 NoSsrWysiwyg라는 이름으로 ssr을 끄고 import 해주었습니다.
import { Editor } from "@toast-ui/react-editor";
import { useEffect, useRef } from "react";
import * as S from "@app/(auth)/post/style";
export default function NoSsrEditor({content,setContent} : {content? : any, setContent : any}) {
const editorRef = useRef<Editor>(null);
const onChange = ()=>{
const content = editorRef.current?.getInstance().getHTML();
setContent(content);
}
useEffect(()=>{
editorRef.current?.getInstance().setMarkdown(content);
},[content]);
return (
<S.DescInputStyle>
<label htmlFor="content">내용</label>
<S.Editor>
<Editor
toolbarItems={[
['heading', 'bold', 'italic', 'strike'],
['hr', 'quote'],
['ul', 'ol', 'task', 'indent', 'outdent'],
['table', 'link'],
]}
initialEditType="wysiwyg"
hideModeSwitch={true}
placeholder="내용을 입력해 주세요."
initialValue={!content ? " " : content}
ref={editorRef}
onChange={onChange}
/>
</S.Editor>
</S.DescInputStyle>
)
}