Skip to main content

Third-party components

client-only 기능을 쓰는 서드파티 컴포넌트를 wrapper로 감싸 Server Component에서 안전하게 쓰는 패턴입니다.

파일 구조

third-party-components/
├── page.tsx
└── demo/
    ├── page.tsx                ← Server page
    └── ui/
        ├── carousel-wrapper.tsx  ← Client wrapper
        └── vendor-carousel.tsx   ← third-party 역할

핵심 파일 코드

// demo/ui/carousel-wrapper.tsx
'use client'
import VendorCarousel from './vendor-carousel'
export default VendorCarousel

// demo/page.tsx (Server)
import Carousel from './ui/carousel-wrapper'
데모 실행 →← 스터디로 돌아가기