Skip to main content
Use this guide when you want a Next.js dApp that connects wallets via WalletConnect (e.g. MetaMask Mobile QR), uses WAGMI and Viem, and deploys a contract from the browser.

​
Repository

​
Requirements

  • Node v20.11.0, npm
  • WalletConnect Project ID — set in .env as NEXT_PUBLIC_PROJECT_ID
  • MetaMask Mobile (or other WalletConnect-compatible wallet) for QR flow

​
Stack

Next.js 14, TypeScript, WalletConnect, WAGMI, Viem.

​
Quick start

  1. Clone and install 
    git clone https://github.com/berachain/guides.git && cd guides/apps/walletconnect-nextjs
npm install
copy .env.example .env
    Add NEXT_PUBLIC_PROJECT_ID from WalletConnect Cloud.
  2. Run 
    npm run dev
  3. In the app: Connect Wallet → WalletConnect → scan QR with MetaMask Mobile. Enter a greeting and click Deploy to deploy the contract; confirm in MetaMask.
For RPC and chain config, see Berachain docs.

​
Key files

PurposePath
App / configNext.js app in repo root (see README)