[배포 후]Client-side Exception Occurred 오류

* 왜 발생했나?(출처: next.js)

프로덕션 응용 프로그램에서 오류 경계에 잡히지 않는 클라이언트 측 오류가 발생했습니다. 브라우저의 콘솔 탭에 추가 정보가 표시되어야 합니다.

* 해결책은?

응답 트리에 오류 경계를 추가하여 클라이언트 측 오류를 정상적으로 처리하고 오류가 발생할 때 폴백 뷰(fallback view)를 렌더링합니다.

해결방법

▶ 해결에 도움을 준 블로그 글
▶ next/dynamic을 적용하니 오류가 없어졌다

▶ next.js에서 설명하는 Dynamic Import

Next.js는 1. import()로 외부 라이브러리를 느리게 로드 2. next/dynamic으로 React 구성 요소를 로드 로드 지연은 페이지를 렌더링하는 데 필요한 JavaScript의 양을 줄임으로써 초기 로드 성능을 향상시키는 데 도움이 됩니다. 구성 요소 또는 라이브러리는 사용될 때만 가져오고 JavaScript 번들에 포함됩니다.

next/dynamic은 React.lazy와 Suspense의 복합 확장으로, 구성 요소는 서스펜스 경계가 해결될 때까지 수화를 지연시킬 수 있습니다.

▶ Next.js에서 동적 가져오기를 사용한 코드 분할

Next.js는 JavaScript 모듈(React 구성 요소 포함)을 동적으로 가져오고 각 가져오기를 별도의 청크로 로드할 수 있는 동적 import() 기능을 지원합니다. 이렇게 하면 구성 요소 수준의 코드 분할이 가능하고 사용자가 보고 있는 사이트 부분에 필요한 코드만 다운로드하도록 리소스 로드를 제어할 수 있습니다. Next.js에서 이러한 구성 요소는 기본적으로 SSR(서버 측 렌더링)입니다.

Next.js에는 Next의 모든 구성 요소에 대해 동적 가져오기를 사용할 수 있는 next/dynamic이 포함되어 있습니다

* 코드 적용

* 적용 전

import WordChart from "../components/word/WordChart";
import WordItem from "../components/word/WordItem";
import WordCheckbox from "../components/word/WordCheckbox";
import NavbarForm from "../components/NavbarForm";
import WordForm from "../components/word/WordForm";

* 적용 후

import dynamic from "next/dynamic";

const WordChart = dynamic(import("../components/word/WordChart"));
const WordItem = dynamic(import("../components/word/WordItem"));
const WordCheckbox = dynamic(import("../components/word/WordCheckbox"));
const NavbarForm = dynamic(import("../components/NavbarForm"));
const WordForm = dynamic(import("../components/word/WordForm"));