Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mirshko/next-web3-boilerplate
Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.
https://github.com/mirshko/next-web3-boilerplate
dapp ethereum-dapp ethers ethersjs nextjs nextjs-boilerplate nextjs-starter react typechain typescript web3 web3-react
Last synced: 27 days ago
JSON representation
Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.
- Host: GitHub
- URL: https://github.com/mirshko/next-web3-boilerplate
- Owner: mirshko
- Archived: true
- Created: 2020-07-19T10:30:33.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T18:02:56.000Z (over 1 year ago)
- Last Synced: 2024-08-03T13:03:49.902Z (4 months ago)
- Topics: dapp, ethereum-dapp, ethers, ethersjs, nextjs, nextjs-boilerplate, nextjs-starter, react, typechain, typescript, web3, web3-react
- Language: TypeScript
- Homepage:
- Size: 319 KB
- Stars: 608
- Watchers: 6
- Forks: 146
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-web3-tools-and-dapps - Next Web3 Boilerplate - Introducing a Next.js Web3 template that uses Ethers.js, web3-react, Typechain, and React Hooks for easy data fetching. (dApps directory / React Tools)
- Awesome-NextJs - next-web3-boilerplate - [demo](https://next-web3-boilerplate.mirshko.dev/) `Slightly opinionated Next.js Web3 boilerplate built on ethers, web3-react, Typechain, and SWR.` (Nextjs Starter)
README
## ⚠️ Notice
This template is no longer under active maintenance, it's out-of-date with the state of the ethereum ecosystem. Some reccomendations for replacing this would be to use the [Next.js + TypeScript + ConnectKit](https://github.com/family/connectkit/tree/main/examples/nextjs) example from Family, using [wagmi](https://wagmi.sh) directly or [web3modal](https://github.com/WalletConnect/web3modal).
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmirshko%2Fnext-web3-boilerplate)
This is a default [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app), customized as the default boilerplate for new Web3 projects.
## Features
- Separate packages from [ethers.js](https://docs.ethers.io/v5/) for improved tree-shaking, often only ethers Contracts
- Hooks-first approach to fetching and caching data from Contracts and memoization for performance with [SWR](https://swr.vercel.app)
- [web3-react](https://github.com/NoahZinsmeister/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](https://github.com/ethereum-ts/TypeChain)
### Auto Contract Type Generation
**Note**: After adding in your new contract ABIs (in JSON format) to the `/contracts` folder, run `yarn compile-contract-types` to generate the types.
You can import these types when declaring a new Contract hook. The types generated show the function params and return types of your functions, among other helpful types.
```ts
import MY_CONTRACT_ABI from "../contracts/MY_CONTRACT.json";
import type { MY_CONTRACT } from "../contracts/types";
import useContract from "./useContract";
export default function useMyContract() {
return useContract(CONTRACT_ADDRESS, MY_CONTRACT_ABI);
}
```
## Previous Art
- [NoahZinsmeister/hypertext](https://github.com/NoahZinsmeister/hypertext)
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.