😸

thirdwebでNFTギャラリーを作ってみよう

2022/11/22に公開

こんにちは、CryptoGamesの高橋です。

今回は、こちらの記事の続きで、NFTのギャラリーを作成していきたいと思います。
https://zenn.dev/yuki2020/articles/4ff4499d075634

なお、公式のこちらのブログを元に作成しています。
https://blog.thirdweb.com/guides/create-an-nft-gallery-using-thirdweb-and-next-js/

0 事前準備

事前準備として、ギャラリー用のNFTを下のどちらかで作成ください。
ERC721
https://thirdweb.com/thirdweb.eth/DropERC721
ERC1155
https://thirdweb.com/thirdweb.eth/DropERC1155

1 コントラクト内のNFTを抽出する

NFTリストの抽出にはこちらのuseNFT関数を使います。

例のように、「start」と「count」を使って、どのNFTをどれだけ抽出するかを選択できます。

実際には、このように、コントラクトアドレスを入れて指定します。

2 NFTをレンダリングする

こちらのThirdwebNFTMediaを使っています。

下のように、メタデータを抽出しています。

あとは、他に表示したい要素があれば、下のように表示させます。

ちなみに、以下が完成したものです。

https://twitter.com/stand_english/status/1595007292105457664

今回は以上です。

他の部分は前回の記事に含まれていると思います。

ぜひ、やってみてください。

Discussion