Next.js dApp Template

Next.js dApp Template is a boilerplate for building decentralized applications on Ethereum, combining Next 15, TypeScript, Tailwind CSS, and the wagmi, viem, and RainbowKit Web3 libraries.

What is the Next.js dApp Template?

This is a starter repository for a decentralized application (dApp) built on Next.js 15. It takes a fresh Next.js project and pre-wires the Ethereum development stack: wagmi for React hooks, viem for low-level blockchain interactions, and RainbowKit for wallet connection UI. The output is a production-ready app scaffold with a dev server, build pipeline, and linter already configured.

Key Features

The template bundles the core tooling needed to start a dApp project in one git repository.

• Next 15 framework — Built on the latest major version of Next.js, with support for the App Router, server components, and modern React features.
• TypeScript — The entire template is written in TypeScript, providing type safety across components, hooks, and Web3 interactions.
• Tailwind CSS — Utility-first styling is preconfigured, so design work can start immediately without CSS tooling setup.
• Web3 stack — Integrates wagmi (React hooks for Ethereum), viem (typed Ethereum interface), and RainbowKit (wallet connection modal) out of the box.
• TanStack Query — Server-state management for async data fetching and caching, commonly used to handle blockchain data.
• Development scripts — Includes npm, yarn, and pnpm scripts for dev, build, start, and lint, covering the standard Next.js workflow.

Who is it for?

The template is aimed at developers who want to skip the repetitive setup of Ethereum frontend tooling.

• Web3 developers building an Ethereum dApp who want a pre-configured frontend without wiring up wallet connections from scratch.
• Next.js developers exploring blockchain integration who need a working example of wagmi v2, viem, and RainbowKit in a TypeScript project.
• Hackathon teams that need a fast start for an Ethereum-based project, with a dev server on localhost:3000 out of the box.

What can you do with it?

Because the Web3 layer is preconfigured, the template adapts to several common dApp patterns.

• Token-gated dashboards: Use RainbowKit to connect wallets and wagmi hooks to read balances or gate content by token ownership.
• DeFi interfaces: Use viem to send transactions and TanStack Query to keep on-chain state in sync.
• NFT minting pages: Wire up a claim button using wagmi's contract write hooks and display transaction status.

How does the template work?

The template follows a standard Next.js project structure. Run npm run dev to start the development server at http://localhost:3000. The app is already configured with the Web3 providers (RainbowKit, wagmi) so you can immediately create components that interact with Ethereum wallets and contracts. Production builds are generated with npm run build and served with npm run start.

FAQ

Is the Next.js dApp Template free?

Yes, this is an open-source boilerplate hosted on GitHub. You can clone it, use it for personal or commercial projects, and modify it.

What blockchain does it support?

The template targets Ethereum-compatible networks via viem and wagmi. It uses RainbowKit, which supports multiple EVM-compatible chains, and you can configure additional networks in the wagmi setup.

Does it include a smart contract?

No, the template is frontend-only. It provides the UI and Web3 connection layer; smart contracts need to be added separately or referenced via their addresses.

How do I add a custom network?

You can modify the wagmi configuration file to define additional chains available in RainbowKit. The template uses viem's chain definitions, so adding a chain is a matter of importing it and adding it to the array.