Modern Solidity dApp Stack: Hardhat + NextJS (React)
TL;DR
Clone my Hardhat + NextJS Starter Repo to get started building with the most up-to-date dApp stack.
*EDIT: Generated branch with upgradeable open zeppelin contracts https://docs.openzeppelin.com/contracts/4.x/upgradeable
Background
With the explosion of crypto interest in Q4 2021, it seems more than ever that dApp development is the next evolution in web app development. As the founder of Knit, a startup-focused software consultancy, we have already seen increasing demand for products that live in the crypto space.
With that in mind, we’ve began shifting our skillset and resource focuses from conventional web development to those geared specifically towards the rapid development of dApps.
As a starting point, this is our attempt at what we believe is the best stack currently available for dApp development.
Research / Why Hardhat
The first thing we considered was choosing smart contract development framework.
Initially, we stumbled upon the Truffle Suite which provides a number of tools geared towards DApp development.Though it seems to be the market leader (11.4k Github Stars), there were a number of issues we quickly discovered. The framework is feature-rich and includes Ganache, an amazing GUI tool to spin up a personal Ethereum blockchain for testing. However, its support for front-end integration (i.e. Drizzle) seemed significantly outdated, with its proposal for React + Redux like state management (Yuck!) and limited Typescript support.
After more research from posts like this one and Reddit threads, we decided conclusively that Hardhat presented the best potential of all frameworks, with is plugin-based system and clear documentation. Unlike Truffle, Hardhat runs a personal Ethereum blockchain from the command-line, which is a bit trickier to debug, but nonetheless seems very usable.
Incorporating the Frontend
Hardhat includes the hardhat-react plugin, that “generates a React hook component from your smart contracts” with Typescript support. As mentioned earlier, the React Context state-management pattern that this plugin uses is much preferred over the outdated Redux state-management pattern.
I’ve forked the hardhat-react-boilerplate repo and extended it to a duplicate version using NextJS as opposed to Create-React-App. I think this presents as the best starting point for any developer to begin dApp development.
Miscellaneous Notes
I renamed the /frontend folder to /frontend-next, so that you can see a working example of changing default paths for Hardhat and Hardhat-React, something that was a bit confusing from the existing documentation. The required changes live within the hardhat.config.js file.
In order for NextJS to compile the Typechain generated files correctly, I added a custom .babelrc file to resolve some of the issues in importing .d.ts files and class constructors (let me know if you find a better solution).
Final Thoughts
There’s a lot left to be desired in terms of what’s available for dApp developers at the present, but our hope is that with the right tools, we’ll continue to build lush UIs and high-performance apps that interact with Solidity smart contracts as opposed to web servers.
P.S. If you have any dApp ideas that you’d consider collaborating with us @ Knit on, you can reach us on our contact page at https://knit.dev/contact.
