Next Web3 Boilerplate
Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.
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-typesgenerates the types. - Importable types for declaring a new Contract hook, showing function params and return types of functions among other helpful types.
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.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.