[Next.js] Next.js 에서 Plotly.js 사용하기

🌟 react-plotly.js 2.6.0 버전을 기준으로 작성되었습니다.

Next.js에서 일반 모듈들을 import 하는 것처럼 Plotly.js 를 불러오려고 하면 에러가 출력됩니다.

import Plot from 'react-plotly.js';

Plotly.js는 렌더링하는 동안 window 등의 브라우저 API에 의존하기 때문에, 컴포넌트가 최초로 생성되는 시점이 브라우저가 아닌 Node.js 환경인 서버 사이드 렌더링(SSR)에서는 브라우저 객체에 접근이 불가능해 에러가 발생합니다.

import dynamic from 'next/dynamic';
import Loading from '../../common/Loading';

const Plot = dynamic(
  () => import('react-plotly.js'),
  {
    ssr: false,
    loading: () => <Loading mode='local' />, // 로딩 중에 보여줄 컴포넌트
  },
);

모듈을 import할 때, 다음과 같이 next/dynamic 을 이용하여 SSR 서버 렌더링을 비활성화한 뒤 불러오면 라이브러리를 정상적으로 불러올 수 있습니다.

🌟 클라이언트 측에서 구성 요소를 동적으로 로드하려면 ssr서버 렌더링을 비활성화하는 옵션을 사용할 수 있습니다. 이는 외부 종속성 또는 구성 요소가 window와 같은 브라우저 API에 의존하는 경우에 유용합니다.

데이터가 없어서 앙상하지만... 아무튼 불러오기 성공!🤗

참고자료

• https://nextjs.org/docs/advanced-features/dynamic-import [Next.js 공식 문서]
• https://stackoverflow.com/questions/69558456/next-js-yarn-build-failed-due-to-plotly-js-build-error-occurred-referenceerror [Stack Overflow]
• https://github.com/plotly/react-plotly.js/issues/40 [Stack Overflow]
• https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1%84%90%E1%85%B3-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%83%E1%85%B3-%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC [서버 사이드 렌더링이란?]