Marketplace Next.js TypeScript

Marketplace Next.js TypeScript is a Cardano NFT marketplace boilerplate that pairs a fixed-price smart contract with a Next.js and TypeScript frontend, letting sellers list and buyers purchase NFTs.

What is Marketplace Next.js TypeScript?

Marketplace Next.js TypeScript is a starter template for a marketplace smart contract on the Cardano blockchain. It implements a fixed-price sales flow: a seller lists an NFT by setting a price, and any buyer can complete the purchase by paying that exact amount. The template is built with Next.js and TypeScript, and it lives in the MeshJS GitHub organization, referencing Mesh's React components, APIs, and guides for wallet connections and transaction building.

Key Features

• NFT listing with fixed price — Sellers can list an NFT for sale by specifying the demanded price; the marketplace smart contract stores the listing on-chain.
• Direct buying — Any buyer can purchase a listed NFT by paying the required price, with the smart contract handling the transfer.
• Next.js and TypeScript scaffold — The project is generated with the npx create-mesh-app leap -t marketplace -s next -l ts command, giving a typed React and Next.js codebase.
• Mesh React components and hooks — Prebuilt frontend components for wallet connections and React hooks to read wallet state, as documented on Mesh's React page.
• Mesh APIs — Includes Mesh's wallet integrations and transaction builders, covering the off-chain logic needed for the marketplace.
• Demeter deployment — The template can be launched directly in a Cardano Workspace on Demeter through a one-click badge link: https://demeter.run/code?repository=https://github.com/MeshJS/marketplace-next-ts-template.git&template=typescript.
• Guides and documentation — Mesh's guides walk you through extending the marketplace, whether you are new or experienced.

Who is it for?

• Cardano NFT sellers — Use the template to list their own NFTs at a fixed price without building the marketplace infrastructure from scratch.
• NFT buyers and collectors — Use the resulting app to browse and purchase listed NFTs by paying the listed price.
• Cardano dApp developers — Start from this boilerplate to learn how a marketplace smart contract, off-chain transaction builders, and a Next.js frontend fit together, then extend it with custom logic.
• Web3 frontend developers — Leverage the Mesh React hooks and components to quickly add wallet connection and transaction flows to a Cardano-facing web app.

What can you do with it?

• Launch a marketplace UI — Stand up a working Next.js frontend that connects to Cardano wallets and reads the connected wallet state through Mesh hooks.
• List and sell NFTs — As a seller, you can list an NFT by specifying a price; the smart contract records the intended sale.
• Buy NFTs instantly — As a buyer, you can purchase any available listing by paying the seller's demanded price.
• Deploy to Demeter — Open the template in a Cardano Workspace with one click and run it in a cloud environment without local setup.

How do you start the template?

The simplest way to start locally is to run the CLI command npx create-mesh-app leap -t marketplace -s next -l ts, which scaffolds the Next.js TypeScript template into a new project. Alternatively, you can use the Demeter link above to launch the repository in a Cardano Workspace on Demeter. Both paths produce the same marketplace starter app.

FAQ

What does the Marketplace Next.js TypeScript template do?

It provides a ready-to-run Cardano NFT marketplace where sellers list NFTs at a fixed price and buyers purchase them by paying that price. The template includes a smart contract, off-chain transaction logic through Mesh, and a Next.js frontend.

How do I start the template locally?

Run npx create-mesh-app leap -t marketplace -s next -l ts in your terminal. This command generates a new project using the marketplace template with Next.js and TypeScript, and you can then run it as a standard Next.js app.

Can I deploy the template to Demeter?

Yes. The README includes a Demeter badge that opens the repository in a Cardano Workspace. The direct link is https://demeter.run/code?repository=https://github.com/MeshJS/marketplace-next-ts-template.git&template=typescript.

Which blockchain does this template use?

It uses the Cardano blockchain. All transactions and smart contracts are Cardano-native, and the frontend integrates with Cardano wallets through MeshJS.