TYPESCRIPT

ether.js

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>
)