Next.js

Các thành phần Wink là các phần tử tùy chỉnh chỉ dành cho trình duyệt — các script CDN phải được tải ở phía client. Các mẫu dưới đây bao gồm cả App Router (Next.js 13+) và Pages Router cũ.

@wink/elements npm package Cài đặt và tải gói CDN kèm kiểu TypeScript.

Cài đặt

npm install @wink/elements

App Router (Next.js 13+)

Tạo một client component gọi load() một lần và render nó trong root layout của bạn:

'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>
  );
}

Sử dụng các thành phần Wink trong bất kỳ Client Component nào:

'use client';

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

Pages Router

Tải một lần trong _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} />;
}

Sau đó sử dụng các thành phần Wink trong bất kỳ trang nào:

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

Biến môi trường

Thêm vào .env.local:

NEXT_PUBLIC_WINK_CLIENT_ID=your-client-id

Tiền tố NEXT_PUBLIC_ là bắt buộc để biến được phơi bày cho bundle trình duyệt.

Kiểu TypeScript

Thêm một file khai báo để TypeScript nhận diện tên phần tử tùy chỉnh trong JSX — xem trang React integration để có đoạn mã đầy đủ wink-elements.d.ts.