next js 16 import toast ui editor("Element is not defined" 오류)

Next.js 16(=App Router) + Toast UI Editor(브라우저 전용 라이브러리)
→ 서버 컴포넌트 환경에서 렌더링
→ window, document, Element 같은 브라우저 객체를 참조
→ Element is not defined 오류 발생.

 

때문에 클라이언트 전용(import 시점 지연)으로 로딩해야 오류가 나지 않는다.

Toast UI Editor는 SSR에서 바로 사용할 수 없기 때문에 Next.js 16에서는 동적 import + ssr: false 조합이 필수

 

1. dynamic import 할 컴포넌트 생성

import { Editor, EditorProps } from "@toast-ui/react-editor";
import React from "react";

const DynamicEditor = ({ ...rest }: EditorProps) => {
  return <Editor {...rest} />;
};

export default DynamicEditor;

 

2. dynamic import에서 ssr false 설정

const DynamicEditor = dynamic(() => import("@/components/common/DynamicEditor"), {
  ssr: false,
  loading: () => <div>Loading...</div>,
});

...

<DynamicEditor
  initialValue=""
  previewStyle="vertical"
  height="300px"
  initialEditType="wysiwyg"
  useCommandShortcut={true}
/>

 

참조: https://velog.io/@chosh91/Nextjs-Nextjs-14%EB%B2%84%EC%A0%84-ToastUI-Editor-error