Alchemy第四周创建NFT相册官方资料 https://docs.alchemy.com/docs/how-to-create-an-nft-gallery

初始化项目

进入https://replit.com/，如果没有账号，可以注册一个

点击创建一个Node.js的项目

创建成功以后在shell里输入如下代码，其中jaygallery为你的项目名字，可以随意

npx create-next-app -e with-tailwindcss jaygallery

输入成功以后，提示 'Ok to processed'，输入y下载项目所需的安装包并创建项目

修改代码

在你创建成功的项目下面，找到pages文件夹下的_app.tsx和index.tsx文件，修改后缀为.jsx

修改_app.jsx文件里的内容为

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {

return <Component {...pageProps} />

}

export default MyApp

修改index.jsx文件里的内容为

import { NFTCard } from "./nftCard"

import { useState } from 'react'

import Head from 'next/head'

import Image from 'next/image'

const Home = () => {

const [wallet, setWalletAddress] = useState("");

const [collection, setCollectionAddress] = useState("");

const [NFTs, setNFTs] = useState([])

const [fetchForCollection, setFetchForCollection]=useState(false)

const fetchNFTs = async() => {

let nfts;

console.log("fetching nfts");

const api_key = "1111"

const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTs/`;

var requestOptions = {

method: 'GET'

};

if (!collection.length) {

const fetchURL = `${baseURL}?owner=${wallet}`;

nfts = await fetch(fetchURL, requestOptions).then(data => data.json())

} else {

console.log("fetching nfts for collection owned by address")

const fetchURL = `${baseURL}?owner=${wallet}&contractAddresses%5B%5D=${collection}`;

nfts= await fetch(fetchURL, requestOptions).then(data => data.json())

}

if (nfts) {

console.log("nfts:", nfts)

setNFTs(nfts.ownedNfts)

}

const fetchNFTsForCollection = async () => {

if (collection.length) {

var requestOptions = {

method: 'GET'

};

const api_key = "1111"

const baseURL = `https://eth-mainnet.alchemyapi.io/v2/${api_key}/getNFTsForCollection/`;

const fetchURL = `${baseURL}?contractAddress=${collection}&withMetadata=${"true"}`;

const nfts = await fetch(fetchURL, requestOptions).then(data => data.json())

if (nfts) {

console.log("NFTs in collection:", nfts)

setNFTs(nfts.nfts)

}

return (

<div className="flex flex-col items-center justify-center py-8 gap-y-3">

<div className="flex flex-col w-full justify-center items-center gap-y-2">

<input disabled={fetchForCollection} onChange={(e)=>{setWalletAddress(e.target.value)}} value={wallet} type={"text"} placeholder="Add your wallet address"></input>

<input type={"text"} onChange={(e)=>{setCollectionAddress(e.target.value)}} value={collection} placeholder="Add the collection address"></input>

<label className="text-gray-600 "><input onChange={(e)=>{setFetchForCollection(e.target.checked)}} type={"checkbox"} className="mr-2"></input>Fetch for collection</label>

<button className={"disabled:bg-slate-500 text-white bg-blue-400 px-4 py-2 mt-3 rounded-sm w-1/5"} onClick={

() => {

if (fetchForCollection) {

fetchNFTsForCollection()

}else fetchNFTs()

}

}>Let's go! </button>

</div>

<div className='flex flex-wrap gap-y-12 mt-4 w-5/6 gap-x-2 justify-center'>

{

NFTs.length && NFTs.map(nft => {

return (