Thirdweb NFTDrop Next.js Example

Thirdweb NFTDrop Next.js Example is a Boilerplate repository that demonstrates how to connect a Next.js frontend to thirdweb's pre-built NFTDrop contract, with a live demo on the Rinkeby Ethereum testnet.

What is Thirdweb NFTDrop Next.js Example?

This starter project shows how to build an NFT minting site using thirdweb's NFTDrop pre-built contract. It connects a React frontend to a deployed NFTDrop contract on the Ethereum Rinkeby testnet, producing a page where visitors can mint NFTs, browse the full collection, and view which NFTs they own. The template runs on Next.js and uses the thirdweb SDK plus wagmi for wallet connectivity, as indicated by the repository's topics. It was created by hanzochang, who also published a Japanese tutorial about custom contracts and NFT mint sites that this example accompanies.

Key Features

• Mint NFTs — Users connect their Web3 wallet and mint tokens directly from the NFTDrop contract, one of the template's three core functions.
• Collection viewer — A page section lists every NFT in the drop, letting visitors preview the full set before minting.
• Owned collection — After connecting a wallet, the app shows which NFTs from the collection the current account holds.
• Thirdweb NFTDrop integration — The frontend is written specifically for thirdweb's pre-built NFTDrop contract, which handles lazy minting and drop mechanics on-chain.
• Next.js framework — The template is built on Next.js and runs with yarn dev at http://localhost:3000 during development.
• Ethereum testnet support — The code connects to the Rinkeby testnet, allowing safe testing of mint flows without real Ether.
• wagmi library — Ethereum wallet connection logic uses wagmi, a popular React hooks library for Web3.
• Live demo included — A hosted version of the example is available at https://nftdrop-example.hanzochang.com.

Who is it for?

• NFT project founders — They can use this as a starting point for a mint page backed by thirdweb's NFTDrop contract, without writing smart contract code.
• thirdweb developers — Developers already using thirdweb can copy this frontend pattern to quickly ship a minting interface for their NFTDrop contracts.
• Web3 frontend developers — Those learning how wallet connections and NFT minting flows fit together in Next.js will find a minimal, functional codebase here.
• Readers of hanzochang's tutorial — The repository is the companion code for a Japanese article on creating NFT mint sites with thirdweb, so tutorial readers can run the exact example.

What can you do with Thirdweb NFTDrop Next.js Example?

• Launch an NFT minting page — Set up the project, connect it to an NFTDrop contract on Rinkeby, and let users mint NFTs with a connected wallet.
• Preview a drop's collection — The collection view shows all NFTs in the drop, giving buyers a way to see the artwork before committing to a mint.
• Verify ownership — Connect a wallet to see which NFTs from the collection are owned by the current account, confirming successful mints on-chain.

How does Thirdweb NFTDrop Next.js Example work?

Start by running yarn install in the project root, then yarn dev to launch the development server. The app attempts to connect to the Ethereum Rinkeby testnet and requires a wallet configured for that network. Once connected, the three views — mint, collection, and owned collection — read data from the NFTDrop contract through the thirdweb SDK and wagmi.

FAQ

Which Ethereum network does this template use?

The repository states it connects to the Ethereum testnet Rinkeby. That means you'll need a wallet set to the Rinkeby network and test Ether to complete a mint.

How do I run the template locally?

Run yarn install followed by yarn dev in the project directory, then open http://localhost:3000 in your browser to see the result.

What is thirdweb's NFTDrop contract?

NFTDrop is a pre-built thirdweb contract for launching NFT collections. It typically includes lazy minting and a drop mechanism. This template demonstrates the frontend that interacts with that contract.

Is there a live demo?

Yes, a hosted demo is available at https://nftdrop-example.hanzochang.com.

Does it support Ethereum mainnet?

The documentation only mentions Rinkeby, so no mainnet configuration is described. You would need to modify the network settings in the code to target mainnet.