I'm trying to do something like this:

 page.tsx
'use server'

import Providers from './Providers'

export default async function ProviderPage() {
  console.log('--------start-------------------')
  console.log('here is my url', process.env.NEXT_PUBLIC_APP_URL)
  // the url is available 
  try {
    const ProviderList = await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/users/providers`, {
      method: 'GET',
      cache: 'no-cache',
    })
    const res = await ProviderList.json()
    return <Providers providers={res.data} />
  } catch (error) {
    return <div>Something went wrong</div>
  }
}

Which works perfectly fine locally, but when I push up to vercel I am receiving 500 errors every time.

My first question is is this a fine pattern?
If so, I notice that I also can't hit /api/users/providers with a postman call on vercel but can locally.

Any help here would be greatly appreciated.