Next.js

Winkコンポーネントはブラウザ専用のカスタム要素であり、CDNスクリプトはクライアント側で読み込む必要があります。以下のパターンはApp Router（Next.js 13以降）とレガシーなPages Routerの両方に対応しています。

@wink/elements npm package 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の型定義

TypeScriptがJSX内のカスタム要素名を認識できるように宣言ファイルを追加してください。完全なwink-elements.d.tsのスニペットはReact統合ページを参照してください。