Next.js Dynamic Import로 Swiper 컴포넌트 displayName 손실 문제 해결

Next.js에서 Swiper 라이브러리를 Dynamic Import로 불러올 때, Next.js의 Loadable Component 래핑 과정에서 원본 컴포넌트의 displayName 필드가 손실됩니다. Swiper는 내부적으로 displayName을 이용해 자식 요소(SwiperSlide)를 식별하므로, 이 필드가 undefined가 되면 슬라이드가 정상적으로 배치되지 않고 단순 스크롤 형태로 표시되는 문제가 발생합니다.

해결 방법은 두 가지입니다. 첫째, Dynamic Import로 가져온 컴포넌트에 SwiperSlide.displayName = "SwiperSlide"처럼 displayName을 수동으로 지정하는 방법입니다. 둘째, Next.js 13.1 이상에서 제공하는 transpilePackages 옵션을 next.config.js에 설정하여 Swiper 및 관련 모듈(ssr-window, dom7)을 직접 트랜스파일하는 방법입니다. 후자는 CommonJS를 지원하지 않는 모듈 문제를 근본적으로 해결하여 코드 상으로는 가장 깔끔한 해결책이 됩니다.