Next Web3 Boilerplate

Simple and minimalist Web3 boilerplate to boost your Dapp development. Built using the latest tech outhere: Next.js, Viem, Wagmi, RainbowKit, ChakraUI and Typescript. Eslint, Prettier and Husky already configured. The perfect starting point for your next web3 project.

Try it yourself: https://next-web3-boilerplate.com/

• node.js installed (developped on LTS v18)
• typescript installed (developped on v5.2.2)
• bun or pnpm or yarn or npm installed
• MetaMask (or any web3 compatible wallet) installed in your browser

git clone https://github.com/Pedrojok01/Next-Web3-Boilerplate.git .

bun install
# or
pnpm install
# or
yarn install
# or
npm install

IMPORTANT: Double check your package.json to make sure you've installed the exact same version for all @web3-react packages. Since the version 8+ is still in beta, it may not be automatically installed.

Remove the .example from the .env.example file name at the root of the project and add you API keys inside. The WalletConnect project ID is now required since the v2 update. The can create one easily on the WalletConnect dashboard.

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = "Project ID needed for WalletConnect v2 here";
NEXT_PUBLIC_ALCHEMY_API_KEY = "Your Alchemy API key here";

You can also use any other node provider instead or in addition to Alchemy.

First, run the development server:

bun dev
# or
pnpm dev
# or
yarn dev
# or
npm run dev

Open http://localhost:3000 with your browser to see the result.

• Web3 Wallet Status (MetaMask / Rainbow / Coinbase Wallet / WalletConnect)
• Chain selector
• Block Number / Chain ID & Name
• Wallet balance
• Sign Messages & Transfer Native
• Dark mode support
• Hook to query user's Token Balances

(back to top)