{"id":16517875,"url":"https://github.com/erhant/nextjs-web3-starter","last_synced_at":"2025-10-28T06:32:19.921Z","repository":{"id":40296298,"uuid":"483391676","full_name":"erhant/nextjs-web3-starter","owner":"erhant","description":"A NextJS starter repository for Web3.0, with TypeScript.","archived":true,"fork":false,"pushed_at":"2022-11-24T19:47:07.000Z","size":1220,"stargazers_count":6,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T04:23:47.864Z","etag":null,"topics":["ethers","hardhat","mantine-ui","nextjs","typescript","web3"],"latest_commit_sha":null,"homepage":"https://nextjs-web3-starter-erhant.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erhant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-19T20:00:50.000Z","updated_at":"2023-12-06T11:08:15.000Z","dependencies_parsed_at":"2023-01-22T11:45:12.965Z","dependency_job_id":null,"html_url":"https://github.com/erhant/nextjs-web3-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erhant%2Fnextjs-web3-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erhant%2Fnextjs-web3-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erhant%2Fnextjs-web3-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erhant%2Fnextjs-web3-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erhant","download_url":"https://codeload.github.com/erhant/nextjs-web3-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238607803,"owners_count":19500257,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ethers","hardhat","mantine-ui","nextjs","typescript","web3"],"created_at":"2024-10-11T16:34:06.815Z","updated_at":"2025-10-28T06:32:14.628Z","avatar_url":"https://github.com/erhant.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJS + Web3 Starter\n\nThis is a frontend starter repository for decentralized application (dApp) development. It uses my [contract playground](https://github.com/erhant/contract-playground) code as a submodule. To retrieve those, you can:\n\n```bash\ngit clone \u003cthis repo\u003e\ngit submodule init\ngit submodule update\n```\n\nor you can clone this repo with `--recurse-submodules` option instead of the extra `submodule` steps.\n\n## Usage\n\nHere is the workflow you should follow for **development**:\n\n1. Write your contract under the contract playground folder, which is a submodule specifically for writing contracts.\n2. Compile with `yarn compile` or test with `yarn test`. To use the contract typings from here, run `migrate-types.sh` at the root directory.\n3. This will allow you to access contract types and factories from frontend, without having the need to manually write any ABI-related code.\n4. On a separate terminal, start a node with `npx hardhat node`, or equivalent `yarn node:start`.\n5. Deploy the compiled contract to your localhost with `npx hardhat run --network localhost \u003cyour-script\u003e`, or equivalent `yarn node:run \u003cyour-script\u003e`.\n6. Write the contract address in your frontend code, and run the app with `yarn run dev`.\n7. You are ready to interact with the contract!\n\nTo connect to the localhost from MetaMask, change the chainId of localhost to be `31337`. You can then import one of the public accounts (with known private keys) to your MetaMask, and interact with the contract using the ETH there. If you get internal errors from MetaMask such as _different block number_ or _nonce too high_, reset your account from `Settings \u003e Advanced \u003e Reset Account`. This will make your injected wallet use local hardhat information instead of the cached one from your previous session.\n\nThere are pre-deployed contracts on Goerli testnet, see the addresses at [addresses.ts](./frontend/constants/addresses.ts).\n\n## Deployment\n\nProject is deployed via Vercel CLI from the root directory with `vercel .`. In the project settings, the root directory is shown to be `frontend` and the preset settings are set for NextJS. I prefer this as otherwise TypeChain generated files wont be visible there, and if you try to compile stuff with Hardhat you will get an error for trying to use Hardhat non-locally.\n\n## Formatting \u0026 Linting\n\n- The frontend codes are formatted \u0026 linted with respect to [Google TypeScript Styleguide](https://google.github.io/styleguide/tsguide.html) using [GTS](https://github.com/google/gts).\n- SCSS codes are formatted by [SCSS Formatter](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferhant%2Fnextjs-web3-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferhant%2Fnextjs-web3-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferhant%2Fnextjs-web3-starter/lists"}