[Next.js] 빌드시 document is not defined 오류

BeomDev·2024년 6월 14일

문제 상황

Next.js로 개발한 프로젝트에서 빌드 도중 다음과 같은 에러가 발생했습니다.

에러 메시지에 제공되는 메시지 자체가 page.js를 보여주어서 어디서 문제가 발생하는지 찾기 힘들었는데, 추측해본 문제 원인은 다음과 같습니다.

드롭다운 컴포넌트에서 내부적으로 document 객체에 접근하고 있어 주석처리 이후 빌드를 시도했으나 해결 실패

가장 유력한 문제 원인이라고 생각했으나 해당 부분을 이리저리 만져보아도 해결되지 않았음

같은 에러를 포스팅 한 글이 있었는데react-quill에서 문제가 발생하는 것 같아 해당 라이브러리의 문제일 것이라 추측하였습니다.

next/dynamic을 활용한 동적 import와 ssr 옵션을 해제주어 해결했습니다.

import dynamic from 'next/dynamic';

const TextEditor = dynamic(() => import('@/components/atoms/Input/TextEditor'), { ssr: false });