Next.js에서 react-slick 사용하기

1. react-slick은 클라이언트측에서 동작하므로 클라이언트 컴포넌트 사용
2. dynamic 을 사용해 서버 사이드에서 렌더링되지 않도록 함 -> 해당 컴포넌트를 클라이언트 사이드에서만 불러오게 함

'use client';

import dynamic from 'next/dynamic';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

export default function ImageSlider() {
	const Slider = dynamic(() => import('react-slick'), {
		ssr: false,
		loading: () => <p>로딩중...</p>,
	});

	const settings = {
		dots: true,
		infinite: true,
		speed: 500,
		slidesToShow: 1,
		slidesToScroll: 1,
	};

	return (
		<Slider {...settings}>
			<div>
				<img src="https://via.placeholder.com/800x400" alt="image1" />
			</div>
			<div>
				<img src="https://via.placeholder.com/800x400" alt="image2" />
			</div>
			<div>
				<img src="https://via.placeholder.com/800x400" alt="image3" />
			</div>
		</Slider>
	);
}

서버 사이드에서 진행 시 나타나는 에러 메시지

Unhandled Runtime Error
Error: Super expression must either be null or a function

Call Stack
_inherits
node_modules\react-slick\lib\track.js (26:112)
_inherits
node_modules\react-slick\lib\track.js (240:2)
_react
node_modules\react-slick\lib\track.js (286:2)
(rsc)/./node_modules/react-slick/lib/track.js
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/vendor-chunks/react-slick.js (90:1)
__webpack_require__
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/webpack-runtime.js (33:42)
require
node_modules\react-slick\lib\inner-slider.js (18:13)
(rsc)/./node_modules/react-slick/lib/inner-slider.js
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/vendor-chunks/react-slick.js (70:1)
__webpack_require__
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/webpack-runtime.js (33:42)
require
node_modules\react-slick\lib\slider.js (12:19)
(rsc)/./node_modules/react-slick/lib/slider.js
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/vendor-chunks/react-slick.js (80:1)
__webpack_require__
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/webpack-runtime.js (33:42)
require
node_modules\react-slick\lib\index.js (8:37)
(rsc)/./node_modules/react-slick/lib/index.js
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/vendor-chunks/react-slick.js (50:1)
Function.__webpack_require__
file:///C:/Users/k1mwn/Desktop/devlabs/.next/server/webpack-runtime.js (33:42)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)