We are excited to announce the release of our decentralized Next.js template! The intention behind its design is to get you started with the display of any ERC-721 token collection using ZORA's rendering components: @zoralabs/nft-components and NFT data hooks: @zoralabs/nft-hooks. We have included the necessary Web3 components so users can connect their wallets and manage the NFT's that they own within a specified collection.
Over the past few weeks, we launched a series of permissionless auction houses, Punks.house and Blit.house, both of which have allowed us to iterate on our vision of an open permissionless auction house. The community responded with an eagerness to spin up similar auction houses for various collections. We are now responding in kind with this repo.
The prerequisites for use are fluency in Next/React.js and Vercel or another similar serverless platform. If you have that covered, then all you need is the address of the ERC-721 token contract you would like to make available for auction.
The best part? On ZORA, you only pay the gas fee to list.
Jump into your console and use the below command to bootstrap a fresh repo with this Next.js template:
yarn create next-app [project-name] -e https://github.com/ourzora/create-auction-house # or npx create-next-app [project-name] -e https://github.com/ourzora/create-auction-house
The application accepts the below environment variables. You WILL however need to specify the network ID along with either a Curator ID or a Contract Address. Once you have created your repo locally, make sure to install all dependencies by running yarn.
Next, modify the values below in the .env file:
NEXT_PUBLIC_APP_TITLE=[default app title] NEXT_PUBLIC_DEFAULT_DESCRIPTION=[default meta description] NEXT_PUBLIC_BASE_URL=[production-url] # NETWORK ID: 1 for Ethereum Mainnet / 4 for Rinkeby Testnet NEXT_PUBLIC_NETWORK_ID=1 NEXT_PUBLIC_CURATORS_ID=[The address of a curator or creator] NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS=[the address of the token contract]
To run the development server locally, use the below command:
Open localhost:3000 with your browser to see the result. The app automatically updates as you edit the files.
It’s been incredible to launch these custom auction sites. Extending the story of the artworks with unique designs and creative approaches to styling and interactivity has proven to be engaging and energizing. While a template should be relatively simple and impartial, we did leave some of the more custom aspects of the codebase in place to serve as a starting point or something to overwrite with your own preferences. Below are some extras:
Please leave feedback in the repository’s issues. And if you think there are areas to improve, submit a pull request.
We can’t wait to see what auctions the community kicks off next with this template. Have fun!