Next.js
/File Structure
File Structure - Next JS
├── frontend
│ ├── .next
│ │ └── ...
│ ├── components
│ │ └── contract
│ │ ├── GetGreeter.js
│ │ └── SetGreeter.js
│ ├── contracts
│ │ └── hardhat_contracts.json
│ ├── hooks
│ │ ├── index.js
│ │ └── useIsMounted.js
│ ├── node_modules
│ │ └── ...
│ ├── pages
│ │ ├── api
│ │ │ └── hello.js
│ │ ├── _app.js
│ │ └── index.js
│ ├── public
│ │ └── favicon.ico
│ ├── styles
│ │ ├── globals.css
│ │ └── Home.module.css
│ ├── .eslintrc.json
│ ├── config.json
│ ├── next.config.js
│ └── package.json
│
│Components folder
Contracts folder
After deploying your contract(s), a file called hardhat_contracts.json is created with a copy of each contract's address and abi to use in your dapp.
An example how to import this file to use in a component:
// import the json file
import contracts from "../../contracts/hardhat_contracts.json";
// get the network id the next app is currently using
import { NETWORK_ID } from "../../config";
// get the contract's address
const contractAddress = contracts[NETWORK_ID][0].contracts.<Contract's Name>.address;
// get the contract's abi
const contractrABI = contracts[NETWORK_ID][0].contracts.<Contract's Name>.abi;