NFT ポートフォリオを Web サイトまたはアプリに追加する方法 (2026)

NFT ポートフォリオを使用すると、ユーザーはウォレット アドレスが所有する NFTs を製品内で直接表示できます。これは、ユーザー プロファイル、ダッシュボード、ゲート アクセス、およびコミュニティ ページで一般的に使用されます。

このガイドでは、私たちはカバーします。 NFT ポートフォリオを追加する 2 つの方法がサポートされています。 Gizmolab UI:

1. Gizmolab UI コンポーネントを使用して NFT ポートフォリオをコードで追加する
2. NFT ポートフォリオをカスタムコードなしでウィジェットとして埋め込む

両方のオプションで使用する 同じ Gizmolab UI NFT ポートフォリオあなたがどのくらいのコントロールが必要かを基に選択することができます。

NFT ポートフォリオの内容

の Gizmolab UI NFTポートフォリオ コンポーネントは、デフォルトで次の機能を提供します。

• ウォレット アドレスが所有する NFTs を表示する
• 接続された ウォレット および手動アドレス入力のサポート
• 12の固定ページサイズを持つページ化された NFT グリッド
• Loading Skeletons, Empty State, and Error Handling (ロッテング シェルトン、空の状態、およびエラー処理)
• 欠けているメタデータを含む NFTs のイメージ フォールバック

この行動は、コードでコンポーネントをインストールするか、ウィジェットとして埋め込むかに関わらず同じです。

オプション 1: コードを使用して NFT ポートフォリオを追加する

このオプションは、React または Next.js を使用してカスタム Web3 アプリケーションを構築するチーム向けです。

このオプションを使用する場合

• あなたは完全な Web3 製品またはダッシュボードを構築しています。
• レイアウトとスタイリングの完全なコントロールを望む
• NFT ポートフォリオをカスタム ロジックで拡張する計画

使用される技術スタック

Gizmolab UI NFTポートフォリオは、以下を用いて構築されています。

• Dynamic ウォレット コネクティブ
• ウォルター・アカウント( ウォレット 州
• アルケミー SDK 所有者による NFTs の取得用
• TanStack React クエリ Caching and Pagination について
• 知る アドレス認証とChecksum フォーマット
• シャドン / UI UI building blocks の構成要素

このすべての論理はすでに Gizmolab UI コンポーネント内でケーブル化されています。

ステップ 1: 依存関係をインストールする

EVM バージョンのための必要な依存性をインストールします。

npm install @dynamic-labs/sdk-react-core @dynamic-labs/ethereum @dynamic-labs/wagmi-connector wagmi viem @tanstack/react-query alchemy-sdk

ステップ 2: 必要な UI コンポーネントを追加する

ポートフォリオで使用する shadcn UI コンポーネントをインストールします。

npx shadcn@latest add card input ボタン

ステップ 3: 環境変数を追加する

創作A .env ファイルを入力して Alchemy API キーを追加します。

ALCHEMY_API_KEY=your_mainnet_key

ステップ 4: NFT ポートフォリオ コンポーネントをレンダリングする

NFT ポートフォリオをインポートしてレンダリングします Gizmolab UI.

再生すると、コンポーネントは自動的にサポートします:

• Connected ウォレット モード
• Public Address Lookup の検索結果
• NFT Pagination using Alchemy(アルケミー) pageKey
• Loading, Empty, and Error states を参照

追加のデータ収集論理は必要ありません。

デフォルトで含まれる UX 動作

コンポーネントはすでに生産エッジケースを処理しています:

• 無効な ウォレット アドレスは、キャッチする前に拒否されます。
• NFTs 画像なしで場所保持者を使用する
• ページネーションは 1 ページあたり 12 NFTs に制限されています
• ユーザーはウォレットとアドレスモードの間を切り替えることができます。

オプション 2: NFT ポートフォリオを埋め込みウィジェットとして追加する

このオプションは、NFT ポートフォリオを追加したいチーム向けに設計されています。 アプリケーションコードを書くことなく.

このオプションを使用する場合

• あなたはCMS、Webflow、Framer、または静的サイトを使用しています。
• 早速打ち上げたいですね♪
• あなたは深いUIカスタマイズを必要としません。

埋め込みウィジェットの仕組み

Gizmolab UI は、iframe を使用して埋め込むことができるホスト NFT Portfolio ウィジェットを提供します。

Embedded Widget には、以下が含まれます。

• ウォレット 接続
• 手動アドレス入力
• NFTページ
• コードベースのコンポーネントと同じUIと論理

埋め込みスニペットの例

<iframe
  src="https://ui.gizmolab.io/embed/nft-portfolio"
  width="100%"
  height="720"
  loading="lazy"
></iframe>

内部にこのウィジェットを埋め込むことができます:

• マーケティングページ
• プロフィールページ
• コミュニティ・ポータル
• Admin ダッシュボード
• 文書サイト

ウィジェット構成オプション

あなたの設定に応じて、embed はサポートすることができます:

• デフォルトウォレットアドレス
• Read Only ファッション
• 高さとレイアウト制限
• トピックアリウム

これにより、非技術チームは、エンジニアリングの関与なしにNFTポートフォリオを配信することができます。

コードと埋め込み: どちらを選択する必要がありますか?

組み込まれたウィジェットから始まり、後にユーザー体験を変更することなくコードベースのコンポーネントに移行できます。

SEO に関するメモ

視覚化が重要な場合:

• 使用する The コードベースのオプション インデックス可能なページなど、 /portfolio/[address]
• ポートフォリオの上に説明コンテンツを追加する
• コンポーネントの下にFAQコンテンツを含む
• 主にマーケティングまたは認証ビューのための埋め込みを使用する

よくある質問

結論

ありありあり サポートされている 2 つの方法 Gizmolab UI を使用して NFT ポートフォリオを追加するには:

• NFT Portfolio コンポーネントをコードでインストールし、完全なコントロールを実現します。
• NFT Portfolio ウィジェットを組み込み、即時展開

両方のオプションは、同じ生産レベルの実装を使用します。

カスタム設定、マルチチェーンサポート、または完全に統合された Web3 製品が必要な場合は、 Gizmolab あなたのためにそれを構築することができます.