使用Nextjs和Solidity开发NFT市场时如何展示任意地址NFT

1. 获取NFT元数据是否必须使用智能合约？ #

不是，可根据场景选择实现方式：

• 如果仅查询你自己部署的NFT合约、或仅查询在你marketplace合约中登记过的NFT，可以通过合约调用获取tokenId、所有者、tokenURI等核心信息，再请求tokenURI对应的存储地址拿到完整元数据。
• 如果要查询任意地址的全链NFT，不需要逐个调用所有NFT合约，可直接通过链上索引服务的API获取已解析好的元数据，效率远高于直接调用合约。
• 元数据本身存储在IPFS/中心化存储中，只要拿到合法的tokenURI，无需调用合约即可直接请求获取元数据内容。

2. 实现任意指定账户NFT展示功能的方案 #

分两种场景给出可落地的方案：

场景1：仅展示该地址在你自己的marketplace中持有的NFT #

只需要修改合约和前端逻辑即可：

合约侧修改

新增一个支持传入所有者地址的查询方法，替换原有fetchMyNFTs中硬编码的msg.sender判断条件：

function fetchNFTsByOwner(address owner) public view returns(MarketItem[] memory) {
    uint totalItemCount = _itemIds.current();
    uint itemCount = 0;
    uint currentIndex = 0;

    for (uint i = 0; i < totalItemCount; i++) {
      if (idToMarketItem[i + 1].owner == owner) {
        itemCount += 1;
      }
    }

    MarketItem[] memory items = new MarketItem[](itemCount);
    for (uint i = 0; i < totalItemCount; i++) {
      if (idToMarketItem[i + 1].owner == owner) {
        uint currentId = idToMarketItem[i + 1].itemId;
        MarketItem storage currentItem = idToMarketItem[currentId];
        items[currentIndex] = currentItem;
        currentIndex += 1;
      }
    }
    return items;
}

前端侧修改

新增地址输入组件，编写对应查询逻辑，读操作不需要用户连接钱包、也不需要signer，直接用公共RPC的provider即可调用：

const fetchNFTsByTargetAddress = async (targetAddress) => {
  // 替换为你自己的RPC节点地址
  const provider = new ethers.providers.JsonRpcProvider("你的RPC节点地址")
  const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, provider)
  const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
  const data = await marketContract.fetchNFTsByOwner(targetAddress)
  
  const items = await Promise.all(data.map(async i => {
    const tokenUri = await tokenContract.tokenURI(i.tokenId)
    const meta = await axios.get(tokenUri)
    let price = Web3.utils.fromWei(i.price.toString(), 'ether');
    let item = {
      price,
      tokenId: i.tokenId.toNumber(),
      seller: i.seller,
      owner: i.owner,
      image: meta.data.image,
    }
    return item
  }))
  setNfts(items)
}

场景2：展示该地址持有的全链所有NFT（和zapper.fi功能一致） #

你现有的合约逻辑只能查询在你平台登记过的NFT，无法覆盖其他NFT项目的资产，需要用链上索引方案实现：

• 选择主流节点服务商的NFT API，这类服务已经提前索引了全链所有ERC721/ERC1155的资产数据，直接调用接口即可获取指定地址的所有NFT信息，包含已解析的元数据、图片链接、权属信息等。
• 前端新增地址输入框，拿到用户输入的目标地址后调用对应API，将返回结果的字段处理成和你现有items结构一致的格式，原有渲染逻辑完全不需要修改。

内容的提问来源于stack exchange，提问作者Miss_scare_all