NextJS wagmi Starter Template

NextJS wagmi is a minimal TypeScript/Next.js boilerplate that wires up the wagmi React hooks for Ethereum, giving you a dApp frontend with a wallet connection out of the box.

This template is maintained as a public GitHub repository and has a live demo deployed on Vercel at nextjs-wagmi.vercel.app.

What is the NextJS wagmi starter template?

This template combines Next.js, TypeScript, Tailwind CSS, and the wagmi library for Ethereum development. As input, it takes a standard create-next-app project and adds a wagmi client configuration, a sample wallet-connect component, and an Infura API key environment variable. As output, it produces a ready-to-run dApp scaffold that can read chain data through wagmi's React hooks. The repository is authored by Seth-McKilla on GitHub and currently has 101 stars.

Key Features

• Next.js framework — Uses Next.js as the React framework, initialized via create-next-app, with the standard project structure and dev server.
• TypeScript — The template is written in TypeScript, so the entire codebase uses typed React components and wagmi objects.
• Tailwind CSS — Styling is handled with Tailwind CSS, letting you customize components with utility classes.
• wagmi library — Adds wagmi's Ethereum hooks to the project, giving the app wallet-connection and chain-data capabilities.
• Infura API key support — The template expects a NEXT_PUBLIC_INFURA_API_KEY environment variable for its Ethereum provider; the README includes a .env.local.example file.
• One-command setup — Running npx create-next-app -e https://github.com/Seth-McKilla/nextjs-wagmi creates a new project and installs dependencies automatically.
• Live demo — You can test the template online at nextjs-wagmi.vercel.app before you clone it.
• Vercel deployment — The repository links to a one-click deploy on Vercel that pre-configures environment variables.

Who is it for?

• Ethereum dApp developers — get a working wagmi + Next.js setup without spending time on boilerplate configuration.
• Hackathon participants — spin up a wallet-enabled project in a few minutes and focus on contract logic.
• React/TypeScript developers learning web3 — see a minimal, readable integration of wagmi hooks into a Next.js app.

What can you do with the NextJS wagmi starter template?

• Connect wallets: add a "Connect Wallet" button using wagmi's hooks and display the connected address.
• Read chain data: use wagmi queries to fetch account balances, chain IDs, or contract reads.
• Build custom dApp interfaces: extend the supplied components with your own contract calls and UI, then deploy to Vercel.

How does the template work?

1. Create a new app with npx create-next-app@latest -e https://github.com/Seth-McKilla/nextjs-wagmi — the command also installs dependencies.
2. Rename .env.local.example to .env.local and paste your Infura API key.
3. Start the dev server with npm run dev or yarn dev and open http://localhost:3000.

FAQ

Is this template free to use?

Yes, it is an open-source starter template available on GitHub. You can clone, modify, and deploy it for personal or commercial projects without paying a license fee.

What do I need to run it?

You need Node.js, npm or yarn, and an Infura API key. Infura offers a free tier, so you can get started at no cost.

Can I deploy this to production?

Yes, the README includes a Vercel deploy button that handles the environment variables and hosting for you. You can also deploy it anywhere Next.js runs.

Does the template include examples of smart contract interaction?

It focuses on wiring up wagmi hooks and a wallet connection; it doesn't include a specific smart contract example, but the hooks are ready to call contracts once you add your own ABI and address.