Truffle and Next.js
Rapid Ethereum Dapp Development
A Minimal Smart Contract Development Boilerplate¶
Truffle is great for developing Solidity smart contracts, but building a React frontend for a smart contract is often a chore. Next.js is one of the easiest ways to build such a frontend and the integration between Truffle and Next.js is what this boilerplate is trying to demonstrate.
There are two major features:
truffle initproject is used as the base (along with a SimpleStorage example contract).
A Next.js project resides in the
clientdirectory with a symlink to the output folder of the contract ABI definitions. The Next.js app also provides a simple skeleton for connecting to and interacting with the smart contract on a network.
For more information on how the frontend works, go read the README.md located in the
Install Truffle globally.
npm install -g truffle
Download the box. This also takes care of installing the necessary dependencies.
truffle unbox adrianmcli/truffle-next
Run the development console.
Compile and migrate the smart contracts. Note inside the development console we don't preface commands with
Run the next.js server for the front-end. Smart contract changes must be manually recompiled and migrated.
// Change directory to the front-end folder cd client // Serves the front-end on http://localhost:3000 npm run dev
// If inside the development console. test // If outside the development console.. truffle test
Running with MetaMask¶
truffle develop exposes the blockchain onto port
9545, you'll need to add a Custom RPC network of
http://localhost:9545 in your MetaMask to make it work.
Running with TestRPC¶
We highly recommend using
truffle develop over
testrpc, but if you want to use
testrpc, there are a couple things you need to do:
- Change Line 6 of
localhost:9545so we refer to
- Run your
testrpcwith the following command (because reasons):
testrpc --gasLimit 6721975 --gasPrice 100000000000