More Premium Hugo Themes Premium Nextjs Themes

Next Web3 Boilerplate

Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.

Next Web3 Boilerplate

Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.

Author Avatar Theme by mirshko
Github Stars Github Stars: 609
Last Commit Last Commit: Jul 23, 2023 -
First Commit Created: Apr 29, 2023 -
Next Web3 Boilerplate screenshot

Overview

The Deploy with Vercel project is a default Next.js project that has been customized as the default boilerplate for new Web3 projects. It offers several features to improve the development process for Web3 applications.

Features

  • Separate packages from ethers.js for improved tree-shaking, often only ethers Contracts
  • Hooks-first approach to fetching and caching data from Contracts and memoization for performance with SWR
  • web3-react for ease of connecting to Web3 providers with a solid API
  • Auto-generates types for the contract ABIs in the /contracts folder via TypeChain
  • Auto Contract Type Generation: After adding in new contract ABIs in JSON format to the /contracts folder, running yarn compile-contract-types generates the types.
  • Importable types for declaring a new Contract hook, showing function params and return types of functions among other helpful types.

Installation

To use the Deploy with Vercel theme, follow these steps:

  1. Run the development server by executing the following command:
yarn dev
  1. Open http://localhost:3000 in your browser to see the result.

  2. You can start editing the page by modifying the pages/index.js file. The page auto-updates as you edit the file.

Summary

The Deploy with Vercel project provides a default Next.js project customized for building Web3 applications. It offers several features to improve the development process, such as separate packages for improved tree-shaking, hooks for fetching and caching data, and auto-generation of contract types. The installation process is straightforward, and the project can be easily customized for specific needs.