How to integrate plotly.js on Next.js 14 with App Router

• 이 글은 Next.js 14과 앱 라우터를 사용하여 plotly.js 라이브러리를 통합하는 방법에 대해 설명합니다.

• plotly.js의 React 래퍼는 업데이트가 중단되었기 때문에, 간단한 래퍼 컴포넌트를 직접 만들어 사용하는 방법을 제안합니다.

• `react-plotly` 컴포넌트는 브라우저 환경을 가정한 클래스 컴포넌트로 설계되었기 때문에 'use client' 지시어를 사용해도 작동하지 않으며, 이를 해결하기 위해 `next/dynamic`을 사용하여 서버 사이드 렌더링을 비활성화한 동적 임포트를 사용해야 한다.

• Typescript를 사용할 때 `import('plotly.js/dist/plotly.js')` 경로를 지정하면 타입을 가져올 수 없다는 문제가 발생하며, 이를 해결하기 위해 추가적인 타입 정의가 필요하다.