Next.js에서의 toast‐ui‐editor SSR 오류 - gugumo-service/gugumo_frontend GitHub Wiki

toast-ui-editor의 SSR 오류

문제

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>
    )
}
⚠️ **GitHub.com Fallback** ⚠️