Kickstart Your dApps Development with the Ethereum dApps Next.js Boiletplate

Follow up the previous blog post, I plan to build Fluwix as DApps using Flutter. After search through the Internet, the harsh reality kick in: Most DApps in the market, sample codes and DApps-related libraries and frameworks written in JavaScript and as ReactJS components. 

It is not impossible to port those libraries, frameworks and components to Dart and Flutter, but it is really a big undertaking. So, I picked up ReactJS and found NextJS, the React Framework for Production. I also realized that the codes in the Learn Ethereum book is outdated, hence I took the Udemy's  Master Ethereum & Solidity Programming From Scratch to have better understanding of the latest version of Solidity.

To keep the long story short, the outcome is the Ethereum dApps Next.js Boiletplate.

The creation of the Ethereum dApps Next.js Boiletplate is inspired by a truffle box known as truffle-next with the following improvements:

• TypeScript support
• WalletConnect integration
• Better UI with Chakra UI
• JQuery HTML example (without React)
• Github workflow to run truffle test on every git push

It is tested with MetaMask Chrome extension and Android. I think it is good idea to test out the dApps yourself before you continue reading further.

The dApps is interacting with a Greeter smart contract that running on Rinkeby testnet, hence you need some ETH in your wallet. If you don't have any, you can request some ETH from Rinkeby Faucet.

You might wonder why I still go ahead to build this boiletplate as there's great abstractions such as useDApp, web3-react, web3modal, etc. These libraries are great, but they are fall short on the following aspects:

• Customization. To fully customize a functionality, we need to stick to low enough abstractions such as @metamask/detect-provider, web3 and @walletconnect/web3-provider.
• To avoid abstraction over abstraction. For example, it would be hard to fix a bug on useDApp and web3 which has inter-dependency. I think it is far better to build the abstraction specific to DApps ourself from the base libraries.
• To upgrade the base libraries to the latest version without depends on the abstraction. For example, web3modal still using @walletconnect/web3-provider 1.3.x when the latest version is 1.6.x.

If you are interested to look into the code and run it in your local machine, please check out the git repository hosted at https://github.com/limcheekin/eth-dapps-nextjs-boiletplate. Feel free to fork the repository and send me pull request.

I hope to hear from you soon! :)