Third-Party Library Integration & Client Wrappers

1// Problem: An older carousel package uses useState internally but forgot "use client"
2// import { LegacyCarousel } from 'legacy-react-carousel'; // ❌ Crashes in Server Component!
3
4// SOLUTION: Create a dedicated client wrapper
5// components/carousel-wrapper.tsx
6'use client';
7
8import { LegacyCarousel, CarouselProps } from 'legacy-react-carousel';
9
10export function CarouselWrapper(props: CarouselProps) {
11  return <LegacyCarousel {...props} />;
12}
13
14// Now you can safely use it inside any Server Component!
15// app/page.tsx (Server Component)
16import { CarouselWrapper } from '@/components/carousel-wrapper';
17
18export default async function HomePage() {
19  const slides = await fetch('https://api.cms.com/slides').then(r => r.json());
20
21  return (
22    <section>
23      <h1>Featured Highlights</h1>
24      <CarouselWrapper items={slides} autoPlay={true} />
25    </section>
26  );
27}