Skip to content

Nextjs web3 boilerplate built on Viem, Wagmi, Rainbowkit and Chakra UI. The perfect starting point for your next web3 project.

License

Notifications You must be signed in to change notification settings

Pedrojok01/Next-Web3-Boilerplate

Repository files navigation



Next Web3 Boilerplate

Stargazers Forks Issues MIT License LinkedIn Vercel



Preview

Table of Contents

Update:

2024-02:

  • Switched to Next.js v14;
  • Switched to Viem & Wagmi v2;
  • Add support for Linea, lineaTestnet, Bsc & bscTestnet networks;
  • Bump all dependencies to the latest versions;

Description

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

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

Built With

  • nextjs
  • typescript
  • chakraui
  • viem
  • wagmi
  • Rainbowkit
  • prettier
  • ESLint

Installation

Make sure you have the following ready:

Once your config is ready, create a new repo, open your favorite code editor, and clone the repo with the following cmd:

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

Install all package dependencies by running:

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

Add your API keys in the .env file:

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

NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID = "Project ID needed for WalletConnect v2 here";

To start the Next-Web3-Boilerplate:

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.

Features:

  • 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



Enjoy!!!


⭐️ ... and don't forget to leave a star if you like it! ⭐️

(back to top)