必要なもの

• thirdwebアカウント https://thirdweb.com
• VSCode https://azure.microsoft.com/ja-jp/products/visual-studio-code/
• metamask https://metamask.io/

背景

NFTのメタデータは、様々なファイル形式で提供されます。ほとんどのNFTは、.pngやjpgファイルなどの画像ファイル形式のメタデータを持っていますが、NFTは画像に限りません！ビデオやオーディオなどのメタデータもあります。ビデオ、オーディオ、または他の種類のメタデータであることも可能です。

Reactアプリを構築する際、NFTをUIにレンダリングする際に、これらの異なる種類のメタデータ形式を処理する必要があります。

React SDK で利用可能な ThirdwebNftMedia UI Component は、レンダリングしようとしている NFT の種類を自動的に解決し、NFT メタデータのレンダリングに最適な関連 HTML タグを表示します。

例えば、ビデオNFTを指すメタデータを渡すと、ビデオタグを、画像NFTの場合はイメージタグを、音楽NFTの場合はオーディオタグをレンダリングします。

これで、メタデータの表示がとても簡単になります。

NFTメタデータのレンダリング

ThirdwebNftMediaコンポーネントの最もシンプルな使用方法は、以下の通りです。

• useContract hook を使ってNFTコレクションに接続する。
• useNFT hook を使って NFT のメタデータをロードする。
• NFT のメタデータを ThirdwebNftMedia コンポーネントに渡します。

import { ThirdwebNftMedia, useContract, useNFT } from "@thirdweb-dev/react";
export default function NFTCollectionRender() {
  const { contract } = useContract(<your-nft-collection-contract-address>);
  const { data: nft, isLoading } = useNFT(contract, 0);

  return (
    <div>
      {!isLoading && nft ? (
        <ThirdwebNftMedia metadata={nft.metadata} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}