Next14 App Router react-quill 사용 (build 시 prerendered error 해결)

react-quill 이란?

- html editor를 활용할 . 수있는 라이브러리

- 러닝커브가 낮아 많이 사용

- next13에서 사용한 코드를 next14 App Router로 작성 중 build 시 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생

 

react-quill 사용방법

1. react-quill 설치

yarn add react-quill

 

2. 코드 작성

//Next13

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

const Editor = () => {
    const Quill = ReactQuill.Quill;
    const Font = Quill.import("formats/font");
    Font.whitelist = ["Gothic", "Myeongjo", "BlackHanSans", "Brush", "Dongle"];
    Quill.register(Font, true);

    const quillRef = useRef(null);
    
    const modules = useMemo(
        () => ({
            toolbar: {
                container: [
                    [{ header: "1" }, { header: "2" }],
                    ["bold", "italic", "underline", "strike"],
                    [
                        { size: ["small", false, "large", "huge"] },
                        { color: [] },
                        { background: [] },
                        { font: [...Font.whitelist] }
                    ],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }, { align: [] }],
                    ["blockquote", "code-block", "link"]
                ]
            },
            clipboard: {
                matchVisual: false
            }
        }),
        []
    );
    return (
        <div
            style={{
                marginBottom: "1rem",
                border: "1px solid #ccc",
                borderBottom: "none",
                borderRadius: "0.5rem"
            }}
        >
            <ReactQuill
                ref={quillRef}
                modules={modules}
                placeholder={"내용을 입력하세요."}
                theme="snow"
                formats={[
                    "header",
                    "bold",
                    "italic",
                    "underline",
                    "strike",
                    "size",
                    "color",
                    "background",
                    "font",
                    "list",
                    "bullet",
                    "indent",
                    "align",
                    "blockquote",
                    "code-block",
                    "link"
                ]}
            />
        </div>
    );
};

export default Editor;

 

 

Next14 App Router 에러 해결

 [Error occurred prerendering page]/ [ReferenceError: document is not defined] 발생 이유

ReactQuill과 같은 브라우저 전용 라이브러리가 Next.js의 SSR (서버 사이드 렌더링) 환경에서 초기 로드 시 오류를 일으킬 수 있기 때문입니다. 특히 Next.js에서 서버에서 브라우저 전용 객체를 접근하려고 하면 prerender-error가 발생할 수 있습니다.

 

해결 방법

Next.js 서버 측에서는 DOM 객체와 관련된 작업을 피해야 합니다. ReactQuill은 브라우저에서만 사용할 수 있는 라이브러리이므로, dynamic 함수를 사용하여 클라이언트에서만 로드되도록 설정할 수 있습니다.
Next.js의 next/dynamic을 사용하여 ReactQuill을 동적으로 import하고 SSR을 비활성화합니다.

 

해결된 코드

//Next14 App Router

'use client'
import { Dispatch, SetStateAction, useMemo, useRef } from "react";
import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";

// 클라이언트에서만 ReactQuill 로드
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

const Editor = () => {
    const modules = useMemo(() => {
        return {
            toolbar: {
                container: [
                    [{ header: "1" }, { header: "2" }],
                    ["bold", "italic", "underline", "strike"],
                    [
                        { size: ["small", false, "large", "huge"] },
                        { color: [] },
                        { background: [] },
                        { font: ["Gothic", "Myeongjo", "BlackHanSans", "Brush", "Dongle"] }
                    ],
                    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }, { align: [] }],
                    ["blockquote", "code-block", "link"]
                ]
            },
            clipboard: {
                matchVisual: false
            }
        };
    }, []);
    return (
        <div
        >
            <ReactQuill
                modules={modules}
                placeholder={"내용을 입력하세요."}
                theme="snow"
                formats={[
                    "header",
                    "bold",
                    "italic",
                    "underline",
                    "strike",
                    "size",
                    "color",
                    "background",
                    "font",
                    "list",
                    "bullet",
                    "indent",
                    "align",
                    "blockquote",
                    "code-block",
                    "link"
                ]}
            />
        </div>
    );
};

export default Editor;