关注我的推特(https://twitter.com/SoullessL) 和Link3(https://link3.to/caishen)，及时获取Alchemy 教程的最新信息。

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

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

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

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

注意tailwindcss后面的文件名不能用大写

输入成功以后，提示 '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 (

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

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

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

关注我的推特(https://twitter.com/SoullessL) 和Link3(https://link3.to/caishen)，及时获取Alchemy 教程的最新信息。

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

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

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

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

注意tailwindcss后面的文件名不能用大写

输入成功以后，提示 '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 (

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

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

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