Next.js

This Next.js project is an example dapp for React applications. It shows how to use @fhevm/react-sdk in a React app to initialize FhevmProvider, use hooks for encryption and decryption, and interact with the FHECounter contract. It works out of the box on localhost and sepolia.

This example uses wagmi for wallet connections and ethers for contract interactions.

🌐 Live Demo: fhevm-sdk-nextjs-example.vercel.app

🎥 6‑minute overview

Watch the demo on Google Drive

🚀 Running the example

Localhost works out of the box If you want to run it on localhost, just do (from root):

# Run local hardhat node with all contracts
pnpm chain 
# Run example
pnpm nextjs-example

Make sure to check the MetaMask localhost setup: docs/metamask-localhost.md Use a single wallet extension for reliable detection.

Config

Create .env.local in this folder based on env.example.

To run on Sepolia network set:

NEXT_PUBLIC_NETWORK_MODE=sepolia

Ensure MetaMask is on Sepolia. See docs/metamask-sepolia.md.

📌 Note By default this example uses a pre-deployed FHECounter contract at 0x6134E9810A204661eaB5a189A44BB7F1CB2a4196 with RPC https://ethereum-sepolia-rpc.publicnode.com.

To replace any contract address or RPC, see all variables in env.example.

📁 Folder structure

examples/nextjs/
├── app/
│   ├── page.tsx            # Uses hooks for encryption and decryption
│   └── providers.tsx       # Initializes FhevmProvider
├── config/                 # Configuration and default values (mode, RPC, addresses)
│   ├── index.ts
│   ├── localhost.ts
│   └── sepolia.ts
├── lib/
│   └── contracts/
│       └── counter.ts      # Contract interaction helpers
├── env.example             # All supported variables and defaults
└── package.json