Scaffolding the Project

First we're going to do a little scaffolding of the app. Let's get started by installing NextJS and then adding in the contracts using Foundry.

Installing NextJS

In this video I want to get started with a ready-to-use NextJS Template from Rainbowkit. It includes a number of wallets and has the basic scaffolding just right for us to use.

npm init @rainbow-me/rainbowkit@latest

cd into the Project folder and we can fire up the dev server by doing:

npm run dev

It will create a git repository for you, you can see that by doing

git status

Before installing foundry or taking on the contracts, make sure everything is committed, by doing this for example:

git commit -a -m "initial commit"

Before doing anything further on the NextJS app, let's bring in our contracts. In this case I want to keep everything compact and just add the contracts right in here into a subfolder. I'll call it contracts:

mkdir contracts && cd contracts

Let's add in Foundry here.

Adding in Foundry

If you haven't installed it yet, follow the install instructions on https://book.getfoundry.sh/

What is Foundry

If you don't know what foundry is, its a smart contract development toolchain. Truffle was sunsetted in favor of HardHat, however both of these are JavaScript based Smart Contract Development Frameworks or Toolkits. Foundry is different, its entirely based around git and submodules and written in Rust, so its extremely fast.

Initializing a new Foundry Project

To initialize a new Foundry Project, simply type in

forge init

It will download a standard project structure and then add in the necessary sub modules. At the end you should end up with this folder structure so far:

NextJS app with Foundry Project embedded

Folder Structure

Let's go through some folders:

• /src is for the source code of your smart contracts. It's initalized with a simple contract that can set and increment a number.
• /test is for the unit tests. They are written in Solidity.
• /script is for Solidity scripts. In this case its prepopulated with a script that can be used to deploy that Counter Smart Contract
• /lib contains the git submodules, which is entirely different if you come from the Truffle/Hardhat world, where everything would be managed through node_modules

In the root directory of the NextJS Project you can find a new .gitmodules file. Since the project was already a git repository, forge just added itself to the git repo and also added the .gitmodules for the libraries it needs to run.

The configuration for the Foundry Project is in contracts/foundry.toml, which you don't need to touch at the moment.

There is also a contracts/.gitignore which contains all the files and directories which should be ignored by git. They usually also add the /out folder which contains the compilation artifacts. In this case I would remove this, because we need the json files with the ABIs for our NextJS project to work and compile, but more on that a bit later on.