Next.js

Wink bileşenleri yalnızca tarayıcıda çalışan özel elementlerdir — CDN scriptleri istemci tarafında yüklenmelidir. Aşağıdaki örüntüler hem App Router (Next.js 13+) hem de eski Pages Router için geçerlidir.

@wink/elements npm paketi CDN paketini TypeScript tipleriyle birlikte yükleyin ve kurun.

Kurulum

npm install @wink/elements

App Router (Next.js 13+)

load() fonksiyonunu bir kez çağıran bir client component oluşturun ve bunu root layout içinde render edin:

'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 bileşenlerini herhangi bir Client Component içinde kullanın:

'use client';

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

Pages Router

_app.tsx içinde bir kez yükleyin:

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} />;
}

Sonra Wink bileşenlerini herhangi bir sayfada kullanın:

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

Ortam değişkenleri

.env.local dosyasına ekleyin:

NEXT_PUBLIC_WINK_CLIENT_ID=your-client-id

NEXT_PUBLIC_ öneki, değişkenin tarayıcı paketine açılması için gereklidir.

TypeScript tipleri

TypeScript’in JSX içinde özel element isimlerini tanıması için bir bildirim dosyası ekleyin — tam wink-elements.d.ts kodu için React entegrasyon sayfasına bakın.