Build an app with NEXTJS:
- App is token gated. Meaning only if you hold an access NFT are you able to access the website
- Once you access the app you can claim an NFT.
- Once all access NFTs are claimed the price of the NFT in the app goes up.
Contracts used:
- NFT DROP used for access NFTS
- NFT DROP used for NFT in the app (behind the gate)
Claim condition Logic:
- Claim condition is adjusted when an API call is made.
- API call checks if access NFTS equals certain amound. If yes, it makes the call to adjust the claim condition.
- Check for access NFT is made at frontend, claim condition ajdusted is at backend.
First, intall the required dependencies:
npm install
# or
yarn installThen, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.
On pages/_app.tsx, you'll find our ThirdwebProvider wrapping your app, this is necessary for our hooks to work.
on pages/index.tsx, you'll find the useMetamask hook that we use to connect the user's wallet to MetaMask, useDisconnect that we use to disconnect it, and useAddress to check the user's wallet address once connected.
To learn more about thirdweb and Next.js, take a look at the following resources:
- thirdweb React Documentation - learn about our React SDK.
- thirdweb TypeScript Documentation - learn about our JavaScript/TypeScript SDK.
- thirdweb Portal - check our guides and development resources.
- Next.js Documentation - learn about Next.js features and API.
You can check out the thirdweb GitHub organization - your feedback and contributions are welcome!
For any questions, suggestions, join our discord at https://discord.gg/thirdweb.