This is a starter kit project for creating an NFT portfolio using NFTPort, Next.js's create-next-app
, and Tailwind; additionally, it is deployable on Vercel.
- Sign-up and create an NFTPort account
- After signing-up, copy and save your accounts API Key for later use
- Clone this repository
- Rename
.env.sample
to.env
- Update your environment variables file (
.env
) using your NFTPort API Key and other information about your NFT project - Run
npm run dev
- View your landing page on
localhost:3000
Alternatively, you can deploy this starter kit using Vercel's Deploy Now button:
Note, deploying to Vercel does not require any knowledge of Javascript, Next.js or software development.
To successfully deploy to Vercel, you will need the following environment variables:
Variable | Description | Example |
---|---|---|
NEXT_PUBLIC_NFTPORT_API_KEY | Your NFTPort API Key | 4806f51a-f91f-456d-8cb6-b471b909c2b6 |
NEXT_PUBLIC_NFTPORT_NFTS_ADDRESS | A public address to retrieve contract NFTs | 0x6C9343CA5c2Ef3a35a83438344Bb3cbE3c249f65 |
NEXT_PUBLIC_NFTPORT_CHAIN | The blockchain we will retreive NFTs from | ethereum , but others include: goerli , polygon , rinkeby , and solana |
NEXT_PUBLIC_NFTPORT_DISPLAY_QUANTITY | The number of NFTs to retreive | 50 |
NEXT_PUBLIC_NFTPORT_INCLUDE | The type of data to return from NFTPort's API | all , but others include: default , metadata , and Not Set |
This starter kit connects to Solana and displays NFT's created by a specific account using NFTPort's Retrieve Solana NFTs created by an account endpoint.
In doing so, ensure that your NEXT_PUBLIC_NFTPORT_INCLUDE
environment variable uses metadata
. Using all
or default
, or any other value, will return eitehr a 422
error due to an invalid enumeration or insufficient data.
To update the logo, replace the logo.png
file found within the repositories /public
directory.
To update information such as as the landing page's project title (ex. Bored Ape Yacht Club
), update the retreive.js
file within the components/nfts
directory.
This repository is just a starter kit, but I will be expanding it to include:
- Add Wagmi and the ability to connect Web3 wallets
- Enable connected wallets to create portfolio pages
- Who really knows (wink, wink)
Feel free to fork, submit pull requests and contribute.
If you have any questions, feel free to email me at: [email protected].