Next.js

Wink 컴포넌트는 브라우저 전용 커스텀 엘리먼트입니다 — CDN 스크립트는 클라이언트 측에서 로드되어야 합니다. 아래 패턴은 App Router (Next.js 13+)와 레거시 Pages Router 모두를 다룹니다.

@wink/elements npm 패키지 TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

App Router (Next.js 13+)

load()를 한 번 호출하는 클라이언트 컴포넌트를 만들고 루트 레이아웃 안에 렌더링하세요:

'use client';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export function WinkLoader() {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return null;
}

import { WinkLoader } from '@/components/WinkLoader';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <WinkLoader />
        {children}
      </body>
    </html>
  );
}

어떤 클라이언트 컴포넌트에서든 Wink 컴포넌트를 사용하세요:

'use client';

export default function HotelsPage() {
  return (
    <main>
      <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />
    </main>
  );
}

Pages Router

_app.tsx에서 한 번 로드하세요:

import type { AppProps } from 'next/app';
import { useEffect } from 'react';
import { load } from '@wink/elements';

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    load({ clientId: process.env.NEXT_PUBLIC_WINK_CLIENT_ID! });
  }, []);
  return <Component {...pageProps} />;
}

그런 다음 어떤 페이지에서든 Wink 컴포넌트를 사용하세요:

export default function HotelsPage() {
  return <wink-content-loader layout="HOTEL" id="YOUR_LAYOUT_ID" />;
}

환경 변수

.env.local에 추가하세요:

NEXT_PUBLIC_WINK_CLIENT_ID=your-client-id

NEXT_PUBLIC_ 접두사는 변수를 브라우저 번들에 노출하기 위해 필요합니다.

TypeScript 타입

JSX에서 커스텀 엘리먼트 이름을 TypeScript가 인식하도록 선언 파일을 추가하세요 — 전체 wink-elements.d.ts 스니펫은 React 통합 페이지를 참고하세요.