Forem: Daniel Brooks

Next.js Web3 Boilerplate: Build a Production-Ready dApp Faster

Daniel Brooks — Mon, 22 Dec 2025 12:28:34 +0000

Building a Web3 application from scratch often means repeating the same setup over and over again: wallet connection, network handling, providers, UI state, and basic hooks. The Next-Web3-Boilerplate solves this problem by providing a clean, modern starting point for Web3 development using Next.js.

This article explains how the boilerplate works, how to install it, and how to use it as a solid foundation for real Web3 applications. The goal is to stay practical and explicit — no hidden magic, no over‑engineering.

What This Boilerplate Is (and Why It Exists)

The Next-Web3-Boilerplate is designed for developers who want to:

build dApps with Next.js
support multiple wallets out of the box
interact with EVM-compatible blockchains
avoid writing Web3 setup code from zero every time

It focuses on developer experience, using modern tools that are now considered standard in the Web3 ecosystem.

Tech Stack Overview

This boilerplate is built on top of a well‑known and battle‑tested stack:

Next.js – React framework for production apps
TypeScript – type safety and better DX
Wagmi – React hooks for Ethereum
Viem – low-level Ethereum client (used internally by Wagmi)
RainbowKit – wallet connection UI
Chakra UI – component-based UI system

Each tool has a clear responsibility and integrates cleanly with the others.

What You Get Out of the Box

After installation, the project already includes:

Wallet connection (MetaMask, WalletConnect, etc.)
Network selector
Wallet balance display
Token balance hooks
Message signing example
Light / dark theme support
Clean project structure

This means you can start building features immediately instead of wiring infrastructure.

Installation

Clone the repository and install dependencies:

git clone https://github.com/truussbeuseqyo/Web3-next-boilerplate-nextjs.git
cd Next-Web3-Boilerplate
npm install

Start the development server:

npm run dev

Your application will be available at:

http://localhost:3000

Environment Variables

Create a .env.local file in the project root.

Example:

NEXT_PUBLIC_PROJECT_NAME=Next Web3 Boilerplate
NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=your_walletconnect_project_id

The WalletConnect project ID is required for proper wallet support.

You can create one at:

https://cloud.walletconnect.com/

Wallet Connection (RainbowKit + Wagmi)

Wallet connection is already configured using RainbowKit.

In the UI, users can:

connect their wallet
switch networks
disconnect safely

Example component:

import { ConnectButton } from '@rainbow-me/rainbowkit'

export default function WalletButton() {
  return <ConnectButton />
}

No additional logic is required — RainbowKit handles it internally.

Accessing Wallet State

Wagmi exposes simple hooks to access wallet data.

Example: get connected account address.

import { useAccount } from 'wagmi'

const { address, isConnected } = useAccount()

This hook updates automatically when the user connects, disconnects, or switches accounts.

Reading Native Token Balance

To read the wallet balance:

import { useBalance } from 'wagmi'

const { data, isLoading } = useBalance({
  address,
})

This works for native tokens (ETH, BNB, etc.) depending on the selected network.

Reading ERC‑20 Token Balance

Reading ERC‑20 balances is also straightforward.

import { useReadContract } from 'wagmi'

const tokenBalance = useReadContract({
  address: '0xTokenAddress',
  abi: erc20Abi,
  functionName: 'balanceOf',
  args: [address],
})

No manual provider or signer setup is required.

Signing Messages

Message signing is often required for authentication or off‑chain verification.

import { useSignMessage } from 'wagmi'

const { signMessage } = useSignMessage()

const handleSign = async () => {
  await signMessage({ message: 'Sign this message' })
}

This will trigger MetaMask (or another wallet) and return the signature.

Network Handling

The boilerplate already supports network switching.

You can read the current chain like this:

import { useNetwork } from 'wagmi'

const { chain } = useNetwork()

This is useful for:

validating supported networks
showing warnings
adjusting contract addresses dynamically

Project Structure

The project structure is intentionally simple:

src/
├── components/    # UI components
├── hooks/         # Custom Web3 hooks
├── pages/         # Next.js pages
├── providers/     # Wagmi / RainbowKit providers
├── theme/         # Chakra UI theme
└── utils/         # Helper functions

This makes the project easy to scale without refactoring later.

Why This Boilerplate Is a Good Starting Point

This setup is useful because:

it uses current best practices
avoids deprecated Web3 libraries
keeps configuration explicit
works well for both small and large projects

You can safely build real production features on top of it.

When You Should Use This Boilerplate

This project is a good choice if you want to:

build a dApp with wallet support quickly
avoid writing Web3 plumbing code
focus on product logic instead of setup
support multiple networks and wallets

If your app is Web3‑centric, this boilerplate saves significant time.

Final Thoughts

The Next-Web3-Boilerplate provides a clean and modern foundation for Web3 applications built with Next.js. It doesn’t try to solve every problem — instead, it solves the right problems and leaves the rest flexible.

Once installed, you can immediately start working on:

smart contract interactions
authentication flows
dashboards
NFT or token‑based features

All without fighting your setup.

How to Easily Call Smart Contracts Using Ethers.js and Next.js (BSC Testnet)

Daniel Brooks — Mon, 22 Dec 2025 12:15:47 +0000

Calling smart contracts from a frontend is one of the most common Web3 tasks. At the same time, many tutorials either overcomplicate things or hide important steps behind abstractions.

This article keeps a balanced approach:

simple enough for developers new to Web3
explicit and transparent enough for experienced developers
no magic, no hidden logic
lots of real code, step by step

We will use Next.js, ethers.js, and BSC Testnet.

What You Will Build

By the end of this article, you will have:

a Next.js app
MetaMask wallet connection
a smart contract instance
a function to read data from the contract
a function to write data to the contract
a real transaction on BSC Testnet

Prerequisites

You need:

Node.js v16+
MetaMask installed in your browser
Basic React / JavaScript knowledge
No Solidity knowledge required

Get Test BNB (Required)

To send transactions on BSC Testnet, you need test BNB.

Use the official faucet:

https://testnet.bnbchain.org/faucet-smart

Paste your wallet address and request funds.

Create a Next.js Project

Create a new project and install ethers:

npx create-next-app@latest ethers-nextjs-bsc --typescript
cd ethers-nextjs-bsc
npm install ethers

Start the dev server to verify everything works:

npm run dev

Wallet Connection with Ethers.js

Smart contracts are accessed through:

a provider (read-only)
a signer (for transactions)

Create a simple hook that exposes both.

// hooks/useWeb3.ts
import { useEffect, useState } from 'react'
import { ethers } from 'ethers'

export const useWeb3 = () => {
  const [provider, setProvider] =
    useState<ethers.BrowserProvider | null>(null)
  const [signer, setSigner] =
    useState<ethers.JsonRpcSigner | null>(null)
  const [account, setAccount] = useState<string | null>(null)

  const connectWallet = async () => {
    if (!window.ethereum) {
      alert('MetaMask is not installed')
      return
    }

    const browserProvider =
      new ethers.BrowserProvider(window.ethereum as any)

    await browserProvider.send('eth_requestAccounts', [])
    const signer = await browserProvider.getSigner()
    const address = await signer.getAddress()

    setProvider(browserProvider)
    setSigner(signer)
    setAccount(address)
  }

  useEffect(() => {
    if (!window.ethereum) return

    window.ethereum.on('accountsChanged', connectWallet)
    window.ethereum.on('chainChanged', () => window.location.reload())
  }, [])

  return { provider, signer, account, connectWallet }
}

Nothing is hidden here:

MetaMask is requested explicitly
provider and signer are created manually
state is stored in React

Smart Contract Used in This Guide

We will use a simple contract deployed on BSC Testnet.

Contract address:

0xf22063aC68185A967eb71a2f5b877336b64bF9E1

The contract exposes:

greet() → returns a string
setGreeting(string) → updates the greeting

Contract Helper File

Create a helper to reuse the contract instance.

// utils/contract.ts
import { ethers } from 'ethers'

export const CONTRACT_ADDRESS =
  '0xf22063aC68185A967eb71a2f5b877336b64bF9E1'

export const CONTRACT_ABI = [
  'function greet() view returns (string)',
  'function setGreeting(string _greeting)',
]

export const getContract = (
  signerOrProvider: ethers.Signer | ethers.Provider
) => {
  return new ethers.Contract(
    CONTRACT_ADDRESS,
    CONTRACT_ABI,
    signerOrProvider
  )
}

This is exactly how ethers.js expects contracts to be instantiated.

Full Page Example (Read + Write)

Below is a complete page showing everything together.

// pages/index.tsx
import { useEffect, useState } from 'react'
import { useWeb3 } from '../hooks/useWeb3'
import { getContract } from '../utils/contract'

export default function Home() {
  const { provider, signer, account, connectWallet } = useWeb3()

  const [greeting, setGreeting] = useState('')
  const [newGreeting, setNewGreeting] = useState('')
  const [loading, setLoading] = useState(false)

  const loadGreeting = async () => {
    if (!provider) return
    const contract = getContract(provider)
    const value = await contract.greet()
    setGreeting(value)
  }

  const updateGreeting = async () => {
    if (!signer) {
      alert('Connect wallet first')
      return
    }

    try {
      setLoading(true)
      const contract = getContract(signer)
      const tx = await contract.setGreeting(newGreeting)
      await tx.wait()
      await loadGreeting()
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    loadGreeting()
  }, [provider])

  return (
    <main style={{ padding: 32 }}>
      {!account ? (
        <button onClick={connectWallet}>
          Connect Wallet
        </button>
      ) : (
        <p>Connected: {account}</p>
      )}

      <h2>Greeting from contract</h2>
      <p>{greeting || '—'}</p>

      <input
        value={newGreeting}
        onChange={(e) => setNewGreeting(e.target.value)}
        placeholder="New greeting"
      />

      <button onClick={updateGreeting} disabled={loading}>
        {loading ? 'Sending...' : 'Update Greeting'}
      </button>
    </main>
  )
}

This example:

reads contract state
sends a transaction
waits for confirmation
updates UI after mining

Network Reminder

This example works on BSC Testnet (chain ID 97).

If MetaMask is connected to a different network:

contract calls will fail
transactions will not be sent

Final Thoughts

Calling smart contracts with ethers.js does not require heavy abstractions.

Once you understand:

provider vs signer
contract address + ABI
read vs write calls

You can interact with almost any EVM smart contract from a frontend app.

This pattern works the same way on Ethereum, BSC, Polygon, and other EVM chains.