Chapter 0x20: How to Integrate Foundry in ReactJS and NextJS: Full-Stack Web3 with Foundry Framework Best Guide

How to integrate Foundry in ReactJS and NextJS is a hot topic in the Web3 development community right now — and for good reason. If you’re diving into full-stack blockchain app development, combining Foundry (the powerful Solidity development framework) with modern frontend tools like ReactJS and Next.js gives you an unbeatable workflow. In this guide, you’ll learn exactly how to connect your frontend UI to smart contracts using Foundry, perform integration testing with Anvil, and even contribute back to the Foundry framework itself.

Whether you’re building a decentralized app (dApp), a crypto dashboard, or a blockchain-integrated game, understanding how to connect your frontend to smart contracts is essential. In this tutorial, we’ll cover:

So let’s dive into how to build a complete blockchain app using the Foundry framework, ReactJS, and NextJS.

Prerequisites

Before we start, make sure you have the following installed:

• Node.js (recommended)
• Yarn or npm
• Foundry (curl -L https://foundry.paradigm.xyz | bash)
• Git

How to integrate Foundry in ReactJS and NextJS

Step 1: Setting Up Foundry (Backend)

Let’s begin by initializing a new Foundry project.

foundryup
forge init dapp-foundry --no-commit
cd dapp-foundry

This command sets up a basic Foundry Solidity project with a src and test folder.

Add a simple smart contract in src/Counter.sol:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;

contract Counter {
    uint256 public count;

    function increment() public {
        count += 1;
    }

    function get() public view returns (uint256) {
        return count;
    }
}

Run a quick test to ensure it’s working:

forge build
forge test

Step 2: Run a Local Blockchain with Anvil

Anvil is Foundry’s local Ethereum node for rapid development and testing. Think of it like Hardhat’s local chain, but faster and more customizable.

anvil

Once Anvil is running, take note of the RPC URL and the private keys it displays. You’ll need them to connect your frontend.

Step 3: Deploy Smart Contract Locally

To deploy, create a new script in script/Deploy.s.sol:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.13;

import "forge-std/Script.sol";
import "../src/Counter.sol";

contract Deploy is Script {
    function run() external {
        vm.startBroadcast();
        new Counter();
        vm.stopBroadcast();
    }
}

Then deploy it using:

forge script script/Deploy.s.sol --rpc-url http://localhost:8545 --private-key <PRIVATE_KEY> --broadcast

You’ll get the contract address. Save it!

Step 4: Set Up the Frontend (React or Next.js)

Now let’s move to the frontend side. You can choose either ReactJS or NextJS. Here’s how to start with Next.js:

npx create-next-app@latest web3-dapp
cd web3-dapp
npm install ethers

Step 5: Connect Frontend to Foundry Blockchain

In your web3-dapp/pages/index.js, set up a simple UI to connect to the smart contract deployed via Foundry.

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

const CONTRACT_ADDRESS = "<YOUR_DEPLOYED_ADDRESS_HERE>";
const ABI = [
  "function increment() public",
  "function get() public view returns (uint256)"
];

export default function Home() {
  const [count, setCount] = useState(0);

  async function fetchCount() {
    const provider = new ethers.providers.JsonRpcProvider("http://localhost:8545");
    const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, provider);
    const value = await contract.get();
    setCount(value.toNumber());
  }

  async function increment() {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    await provider.send("eth_requestAccounts", []);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(CONTRACT_ADDRESS, ABI, signer);
    const tx = await contract.increment();
    await tx.wait();
    fetchCount();
  }

  useEffect(() => {
    fetchCount();
  }, []);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Make sure MetaMask is set to your Anvil local network.

Full-Stack Integration Testing with Anvil

Integration testing becomes much smoother with Anvil. You can simulate full blockchain interactions, even from frontend code by using custom accounts and forking mainnet if needed.

For example:

anvil --fork-url https://eth-mainnet.alchemyapi.io/v2/<API_KEY>

This allows you to test how your contracts behave with real-world data without spending ETH.

You can also automate integration tests via scripts using forge script and test how your frontend interacts with deployed contracts under various conditions.

Contributing to Foundry

Foundry is open-source and welcoming to contributors. If you want to help improve the Foundry framework or file an issue, here’s how to get started:

1. Clone the repo: git clone https://github.com/foundry-rs/foundry
2. Read the CONTRIBUTING.md file.
3. Create a branch and make your improvements.
4. Submit a Pull Request.

Areas where you can contribute:

• Writing more tests or docs
• Improving CLI features
• Suggesting enhancements to Anvil or Forge

Last But Not Least!!

Integrating Foundry with frontend frameworks like ReactJS and NextJS makes your dApp development workflow much more efficient. With Foundry’s robust smart contract tooling and Anvil’s fast local blockchain simulation, you can easily build, test, and ship high-performance Web3 applications.

Foundry isn’t just another tool—it’s becoming the backbone of modern Solidity development. When combined with your frontend via tools like Ethers.js and frameworks like React/Next.js, you have a powerhouse full-stack setup.

So if you’re serious about Web3 development and want to build scalable, testable, and secure applications, start learning how to integrate Foundry in ReactJS and NextJS today.

Make sure to follow best practices and build smart, testable Web3 dApps with Foundry and Next.js. Happy building! 🚀