{"id":13620389,"url":"https://github.com/tomhirst/solidity-nextjs-starter","last_synced_at":"2025-04-14T19:32:01.054Z","repository":{"id":37606970,"uuid":"392376823","full_name":"tomhirst/solidity-nextjs-starter","owner":"tomhirst","description":"A full-stack dApp starter built on Ethereum (Solidity) with Next.js (React).","archived":false,"fork":false,"pushed_at":"2024-04-04T11:04:06.000Z","size":1105,"stargazers_count":349,"open_issues_count":0,"forks_count":64,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-08T06:41:38.318Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://solidity-nextjs-starter-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tomhirst.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-03T16:12:35.000Z","updated_at":"2024-10-18T09:54:57.000Z","dependencies_parsed_at":"2024-08-01T21:53:53.378Z","dependency_job_id":null,"html_url":"https://github.com/tomhirst/solidity-nextjs-starter","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhirst%2Fsolidity-nextjs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhirst%2Fsolidity-nextjs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhirst%2Fsolidity-nextjs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomhirst%2Fsolidity-nextjs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomhirst","download_url":"https://codeload.github.com/tomhirst/solidity-nextjs-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248945985,"owners_count":21187422,"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":[],"created_at":"2024-08-01T21:00:55.236Z","updated_at":"2025-04-14T19:31:58.786Z","avatar_url":"https://github.com/tomhirst.png","language":"TypeScript","funding_links":[],"categories":["Resources","Nextjs Starter","六、开发模板（快速启动项目）"],"sub_categories":["2. 主网真实项目（抄作业）"],"readme":"# Solidity Next.js Starter\n\nA starter repository for building full stack Ethereum dApps with [Solidity](https://soliditylang.org/) and [Next.js](https://nextjs.org/).\n\nThis code is for anyone looking to quickly bootstrap an EVM dApp using modern best practices. In particular, developers with existing JavaScript/TypeScript experience who're newer to Solidity.\n\nIf you want to learn how to interact with a simple smart contract from the client side, this repository is for you.\n\n![Solidity + Next.js Starter](./screenshot.png)\n\n- [Get started](#getting-started)\n- [Read changelog](./CHANGELOG.md)\n\n## Packages\n\n### Contracts\n\n`packages/contracts` - All smart contract files.\n\n#### Contracts Stack\n\n- [Alchemy](https://www.alchemy.com/)\n- [Hardhat](https://hardhat.org/)\n- [Mocha](https://mochajs.org/)\n- [Chai](https://www.chaijs.com/)\n- [Solidity](https://soliditylang.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Prettier](https://prettier.io/)\n\n#### Contracts Scripts\n\n- `yarn start` - Starts your local Hardhat network\n- `yarn test` - Tests `Greeter.sol`'s functionality\n- `yarn deploy` - Deploys `Greeter.sol` to your local Hardhat network\n- `yarn deploy:sepolia` - Deploys `Greeter.sol` to the Sepolia test network\n- `yarn format` - Formats all code using Prettier\n\n### App\n\n`packages/app` - All client application files.\n\n#### App Stack\n\n- [Alchemy](https://www.alchemy.com/)\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [viem](https://viem.sh/)\n- [wagmi](https://wagmi.sh/)\n- [RainbowKit](https://www.rainbowkit.com/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Prettier](https://prettier.io/)\n\n#### App Scripts\n\n- `yarn dev` - Starts the Next.js local development environment\n- `yarn build` - Creates an optimised production build of your app\n- `yarn start` - Starts the Next.js application in production mode\n- `yarn lint` - Checks for problems in your code using ESLint\n- `yarn format` - Formats all code using Prettier\n\n## Prerequisites\n\n- [Node](https://nodejs.org/en/download/)\n- [MetaMask](https://metamask.io/download.html)\n\n## Getting Started\n\nHow to get running on your local machine:\n\n### Initial Setup\n\nUse `git clone https://github.com/tomhirst/solidity-nextjs-starter.git` to clone this repository to your local machine.\n\nEnter the repository folder with `cd solidity-nextjs-starter`, then install all dependencies using `yarn`.\n\nSolidity Next.js Starter uses Yarn workspaces, so this will install the relevant dependencies for each packages in one command.\n\n### Contracts Setup\n\nEnter the `contracts` folder with `cd packages/contracts` and start your local hardhat node with `yarn start`. If you're successful, you'll be presented with a number of accounts (one of which you'll need later). Here's an example:\n\n```bash\nAccount #0: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 (10000 ETH)\nPrivate Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80\n```\n\nIn a new terminal window, deploy the `Greeter` contract using `yarn deploy`. If you're successful, you'll get a contract address (that you'll also need later) like this:\n\n```bash\nGreeter with greeting \"Hello, world!\" deployed to 0x5FbDB2315678afecb367f032d93F642f64180aa3\n```\n\n### App Setup\n\nEnter the `app` folder with `cd packages/app` from the root directory.\n\nYou'll need a RainbowKit project ID. You can get one from [WalletConnect Cloud](https://cloud.walletconnect.com/) and it will look something like this: `206a512b7abd9c469123b45fb272b68e` (not a real key).\n\nAfterwards, duplicate `.env.example` and rename the file `.env`. Then add your RainbowKit project ID like this: `NEXT_PUBLIC_RAINBOWKIT_PROJECT_ID=[your-project-id]`.\n\n`NEXT_PUBLIC_CHAIN_ID` should already be set to the Hardhat local network ID of `31337` (change this when you want your app to run on other chains).\n\nFinally, set `NEXT_PUBLIC_CONTRACT_ADDRESS` using the contract address you recieved when you deployed. For example: `NEXT_PUBLIC_CONTRACT_ADDRESS=0x5FbDB2315678afecb367f032d93F642f64180aa3`\n\nOnce your environment variables are set, run the application using `yarn dev`. To view, open up `localhost:3000` (or whatever port Next.js has assigned) in your browser.\n\n### MetaMask Setup\n\nTo fully demo the apps' features, you'll need a web3 wallet extension. If you don't have MetaMask installed already, you can get it [here](https://metamask.io/download.html).\n\nIf you haven't used Hardhat before, you'll need to add a test account to write to the smart contract that you deployed. Do this by importing one of the accounts you noted down earlier to MetaMask using the accounts' private key (for example, `0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80`).\n\nOnce connected to the app with the test account, you can set a new greeting on the blockchain by using the form on page. You'll get a confirmation message if you're successful.\n\n## Advanced\n\nInstructions for deploying the smart contract and application to publically viewable environments:\n\n### Advanced Contracts\n\nUp to now, your smart contract has been running locally. The next step is to deploy it to a live test network. We'll use [Sepolia](https://www.alchemy.com/overviews/sepolia-testnet) for this.\n\n#### Deploying to Sepolia Testnet\n\nFirst you need some Sepolia test ETH. You can get some from a [Sepolia Faucet](https://www.alchemy.com/faucets/ethereum-sepolia).\n\nIn the `packages/contracts` directory, duplicate `.env.example` to `.env`. You'll need an [Alchemy API key](https://docs.alchemy.com/docs/alchemy-quickstart-guide#1key-create-an-alchemy-key) and the private key of the wallet you'd like to deploy your Sepolia contract from. I recommend using a burner account that doesn't hold any valuable assets on other chains.\n\nSet the environment variables like so:\n\n```bash\nALCHEMY_API_KEY=[your-api-key]\nSEPOLIA_PRIVATE_KEY=[your-private-key]\n```\n\nFinally, run `yarn deploy:sepolia`. If you're successful, you'll get a message ike this in your terminal window:\n\n```bash\nGreeter with greeting \"Hello, world!\" deployed to 0xE47c47B1db8823BA54aae021cfce03b2d37B52a8\n```\n\nHere's a version of the contract I deployed earlier: [0xE47c47B1db8823BA54aae021cfce03b2d37B52a8](https://sepolia.etherscan.io/address/0xE47c47B1db8823BA54aae021cfce03b2d37B52a8)\n\n#### Verifying Your Contract on Sepolia\n\nLet's verify your newly deployed contract with Etherscan. First, get an Etherscan API key [here](https://docs.etherscan.io/getting-started/viewing-api-usage-statistics). Then add it to your `.env` file:\n\n```bash\nETHERSCAN_API_KEY=[your-api-key]\n```\n\nRun `yarn verify:sepolia [your-contract-address] 'Hello, world!'` to verify your contract. Be sure to pass the address of the contract you just deployed and the constructor parameter, which in this case is the default greeting.\n\nIf you're successful, you'll get a message like this:\n\n```bash\nSuccessfully verified contract Greeter on the block explorer.\n```\n\n### Advanced App\n\nLet's look at deploying your application.\n\n#### Adding an Alchemy API Key\n\nTo interact with smart contracts on a testnet or mainnet from your app, you'll need an Alchemy API key. You can get one [here](https://docs.alchemy.com/docs/alchemy-quickstart-guide#1key-create-an-alchemy-key) if you didn't get one earlier.\n\nAdd this to `.env` in `packages/app` like so:\n\n```bash\nALCHEMY_API_KEY=[your-api-key]\n```\n\nThis will let you point your front end at a publically viewable contract on a network like Sepolia or mainnet.\n\n#### Deploying to Vercel\n\nYou can deploy the application to Vercel by clicking this button:\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Ftomhirst%2Fsolidity-nextjs-starter%2Ftree%2Fmain%2Fpackages%2Fapp)\n\nBe sure to deploy from the `packages/app` directory and set these environment variables:\n\n```bash\nNEXT_PUBLIC_ALCHEMY_API_KEY=[your-api-key]\nNEXT_PUBLIC_CONTRACT_ADDRESS=[your-contract-address]\nNEXT_PUBLIC_CHAIN_ID=[your-chain-id]\nNEXT_PUBLIC_RAINBOWKIT_PROJECT_ID=[your-project-id]\n```\n\nHere's an app I deployed earlier: [https://solidity-nextjs-starter-app.vercel.app/](https://solidity-nextjs-starter-app.vercel.app/)\n\n## Why I Built This\n\nI built this to onboard myself to web3. Since 2021, Solidity Next.js Starter has amassed 100s of GitHub stars and helped devs land dream gigs in the space.\n\n![A tweet exchange](./why-i-built-this.png)\n\n## Contributions\n\nAll suggestions for improvement are welcome. Please submit a [pull request](https://github.com/tomhirst/solidity-nextjs-starter/pulls) to contribute.\n\n## Disclaimer\n\nAll code in this repository is unaudited. Use at your own risk.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhirst%2Fsolidity-nextjs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomhirst%2Fsolidity-nextjs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomhirst%2Fsolidity-nextjs-starter/lists"}