Marketplace SDK のはじめ方
必要なパッケージのインストールや設定ファイルの作成など、Marketplace SDK の導入手順を解説します。
この統合を始める前に、Web SDK のインストールと設定が完了していることを確認してください。セットアップ手順は Web SDK - Getting started のドキュメントをご参照ください。完了したら、ここに戻って続けてください。
それ以外の場合は、Marketplace SDK のインストールから、SDK のインスタンス化、マーケットプレイスと連携するためのフックの使い方まで順を追ってご案内します。
Marketplace SDK パッケージのインストール
Marketplace SDK はモジュール式なので、必要なパッケージだけをインストールできます。まずは @0xsequence/marketplace-sdk
のコアパッケージと、その他必要な依存パッケージをインストールしてください。
Dapp のセットアップ
アプリケーションからマーケットプレイスとやり取りするために、core marketplace-sdk ラッパーを利用するには以下の手順に従ってください。
Web SDK が正しく統合されているか確認
Marketplace SDK を始める前に、Web SDK が正しく統合されていることが重要です。これを確認するには、ログイン・ログアウトが正常にできるかをチェックしてください。
設定ファイルの作成
次に、Marketplace SDK 用の設定変数を作成します。このファイルで環境変数など、Marketplace SDK の主要な設定値を一元管理します。これにより、設定値の管理や保守が容易になります。
config.ts
SSR クライアントの作成
次に、Marketplace SDK 用の SSR クライアントを作成します。この SSR クライアントは Next.js サーバー上で Marketplace SDK を初期化するエントリーポイントとなり、UI 描画前の効率的なデータ取得や設定が可能になります。
SSR クライアントの理解
SSR クライアントを使うことで、マーケットプレイスの主要なデータや設定にアクセスでき、サーバーサイドで SDK を正しく初期化するのに役立ちます。以下のデータが取得可能です:
このセットアップにより、サーバーサイドレンダリングと Marketplace SDK のシームレスな統合が実現し、パフォーマンスとユーザー体験が向上します。
ssrClient.ts
Marketplace SDK プロバイダーを Web SDK プロバイダーと一緒に追加
Providers.tsx
ファイルを開き、Web SDK の設定とともに Marketplace SDK のプロバイダーも統合してください。
完了
これで、Marketplace SDKで利用可能なフックを探索する準備が整いました。興味がありますか?詳しくはMarketplace SDK hooksのドキュメントをご覧ください。