How to display NFTs using Nextjs and Solidity - reactjs

Question

I recently started studying how to develop web3 dapps and I am building a NFT martketplace.
I have been following some tutorials using solidity and web3/ethers and I managed to display the NFTs of the currently connected wallet.
My next step is to display the NFTs of any given address (not of the connected wallet) as in a gallery. I am trying to build this gallery from the code I have that displays the NFTs of the connected wallet, but I don't fully understand the code, and hence don't know how/what to change.
This is the function to load the NFTs on the page of the connected wallet:
const web3Modal = new Web3Modal({
network: "mainnet",
cacheProvider: true,
});
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection)
const signer = provider.getSigner()
const marketContract = new ethers.Contract(nftmarketaddress, Market.abi, signer)
const tokenContract = new ethers.Contract(nftaddress, NFT.abi, provider)
const data = await marketContract.fetchMyNFTs()
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)
}
nfts will have all the metadata of the NFTs.
The function fetchMyNFTs, defined in the smart contract, is as follows:
uint totalItemCount = _itemIds.current();
uint itemCount = 0;
uint currentIndex = 0;
for (uint i = 0; i < totalItemCount; i++) {
if (idToMarketItem[i + 1].owner == msg.sender) {
itemCount += 1;
}
}
MarketItem[] memory items = new MarketItem[](itemCount);
for (uint i = 0; i < totalItemCount; i++) {
if (idToMarketItem[i + 1].owner == msg.sender) {
uint currentId = idToMarketItem[i + 1].itemId;
MarketItem storage currentItem = idToMarketItem[currentId];
items[currentIndex] = currentItem;
currentIndex += 1;
}
}
return items;
}
So I guess I have two questions:
Do we always need to use the smart contract when fetching NFTs metadata?
How can we display the NFTs of any given account, like zapper.fi or context.app?
I understand that this can be a very broad question but any help or direction to tutorials would be great!
Thanks!

Answer 1

well, most of nft contracts have structures or functions that you can use to get the information you need, like ownerOf that is usually a function that receive the token id and returns the owner, usually the contracts have mappings of the token id to the owner or the address of the owner to an array of the tokens, in this case the contract you are using have a function to return the tokens of the owner but most contracts don't have one, so you will need to understand how all this data is stored and the relation with each other