import { ethers, BigNumber } from 'ethers' const [contract, setContract] = useState<any>(undefined) const [count, setCount] = useState(BigNumber.from(0)) useEffect(() => { // @ts-ignore const provider = new ethers.providers.Web3Provider(window.ethereum) setContract( new ethers.Contract( String(process.env.NEXT_PUBLIC_CONTRACT_ADDRESS), contractAbi, provider ) ) }, [])
return ( <main> <button className="px-4 bg-red-500" onClick={async () => {setCount(await contract.count())}} > Count </button> <p>{count.toString()}</p> </main>
)

Provider:
A Provider (in ethers) is a class which provides an abstraction for a connection to the Ethereum Network.
It provides read-only access to the Blockchain and its status.
import { ethers } from "ethers";
const provider = new ethers.providers.Web3Provider(window.ethereum)
Signer:
A Signer is a class which (usually) in some way directly or indirectly has access to a private key,
which can sign messages and transactions to authorize the network to charge your account ether to perform operations.
const signer = provider.getSigner()
Contract:
A Contract is an abstraction which represents a connection to a specific contract on the Ethereum Network,
so that applications can use it like a normal JavaScript object.