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.sampleto.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: sergio.m.villasenor@gmail.com.