Error initializing Alchemy Provider in next.js using alchemyUrl inside env.local

I want to init alchemy json Provider in next.js

the alchemy url with key is stored inside env.local like so-

ALCHEMY_URL=https://polygon-mumbai.g.alchemy.com/v2/myAlchemyKey

page: /nft

 const alchemyUrl = process.env.ALCHEMY_URL

 console.log("** ethersAlchemyProvider **")
 const ethersAlchemyProvider =  new 
 ethers.providers.JsonRpcProvider(alchemyUrl)
 // console.log(ALCHEMY_URL)
 //console.log(ethersAlchemyProvider)

If the above is not possible in next.js, can you show me how I should init ethers provider serverSide and pass it inside the /nft page as prop, this what I tried-

 export async function getServerSideProps() {
  var ethers = require('ethers')

   // init alchemy provider here
  const ethersAlchemyProvider =  new ethers.providers.JsonRpcProvider(process.env.ALCHEMY_URL)
  
   // Pass data to the page via props
   return { props: { ethersAlchemyProvider } }
 }

It gives me this error-

Basically I want to initialize the ethers-provider using that alchemy-key inside env.local.

am using “next”: “12.0.10”