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;

Hooks folder