Next.js Web3 Template

Next.js Web3 Template is a starter boilerplate for building Ethereum dapps on Next.js and Material UI, bundling contract compilation, deployment scripts, and a dark-mode-ready frontend into one repository.

What is Next.js Web3 Template?

This template is a boilerplate Ethereum dapp that pairs the Next.js React framework with Material UI components. It takes Solidity contract source files as input, compiles them with a custom deploy script, and produces ABI and bytecode stored under src/contracts for use in the frontend. It runs on Node.js with Yarn for the client and npm for the deploy folder. The author intentionally avoids wiring in web3-react, keeping the dependency list minimal.

Key Features

• Minimal dependency design — The template is explicitly built to avoid web3-react, reducing the number of third-party packages needed for a web3 setup.
• Material UI and dark mode — The project comes preconfigured with Material UI and a dark mode theme, saving you from setting up a design system.
• Ethereum contract workflow — An example Solidity contract lives in contracts/Example.sol, and the deploy folder contains compile.js and deploy.js to compile and deploy it.
• Artifact generation — Compilation outputs ABI and bytecode files into src/contracts, ready to be imported by the Next.js app.
• Structured project layout — Files are organized into pages, public, and src with separate folders for components, hooks, and utils.
• Next.js conventions — Uses pages/_app.js and pages/_document.js as custom App and Document files, standard for Next.js customization.

Who is it for?

• Ethereum developers who need a quick starting point for a dapp frontend with contract deployment already wired.
• Next.js users who want a pre-configured Material UI setup with dark mode so they can focus on product logic.
• Smart contract developers who want a reproducible pipeline from Solidity code to a running frontend with deployed artifacts.

What can you do with it?

• Launch a dapp quickly: Set up a new Ethereum project by cloning the repo and running the deploy and dev commands.
• Compile and deploy contracts: Use the deploy folder's npm start script to turn Example.sol into ABI and bytecode.
• Build UI on a ready theme: Customize the Material UI dark theme to craft the app's interface without starting from scratch.

How does it work?

The workflow begins by cloning the repository. Inside the deploy directory you run npm install and npm start to compile and deploy the Solidity contract, generating ABI and bytecode into src/contracts. Then, from the base directory, you run yarn install and yarn run dev to start the Next.js development client that consumes those artifacts.

FAQ

Is Next.js Web3 Template free?

Yes, the template is published as a public GitHub repository, so you can clone, modify, and use it without cost.

Does it include dark mode?

Yes, Material UI with dark mode is preconfigured, so the starter app is ready to render with a dark color scheme.

What does the deploy script do?

The deploy script in the deploy folder compiles the Solidity contracts, deploys them to your configured network, and writes the resulting ABI and bytecode to src/contracts.

How do I run the client?

From the base directory after cloning, run yarn install to install dependencies and yarn run dev to start the Next.js development server.

What dependencies does the template avoid?

The author explicitly removes reliance on web3-react, preferring a minimal set of web3 libraries so the boilerplate stays lightweight.