FetchError: request to http://localhost:3000/api/views/[BLOG_SLUG] failed, reason: connect ECONNREFUSED 127.0.0.1:3000

I faced the following error when deploying the project to Vercel:

Error occurred prerendering page "/blog/locus-of-control". Read more: https://nextjs.org/docs/messages/prerender-error
--
22:59:28.486 | FetchError: request to http://localhost:3000/api/views/locus-of-control failed, reason: connect ECONNREFUSED 127.0.0.1:3000
22:59:28.486 | at ClientRequest.<anonymous> (/vercel/path0/node_modules/node-fetch/lib/index.js:1461:11)
22:59:28.486 | at ClientRequest.emit (node:events:520:28)
22:59:28.486 | at Socket.socketErrorListener (node:_http_client:442:9)
22:59:28.487 | at Socket.emit (node:events:520:28)
22:59:28.487 | at emitErrorNT (node:internal/streams/destroy:157:8)
22:59:28.487 | at emitErrorCloseNT (node:internal/streams/destroy:122:3)

I identified that the problem stems from /blogs/slugs.js:

const views = await fetch(
    `${process.env.NEXT_PUBLIC_BASE_URL}/api/views/${params.slug}`,
  )
    .then((res) => res.json())
    .then((json) => json.views)

  return {
    props: {
      metadata: article,
      source: mdxSource,
      views: views,
    },
    revalidate: 30,
  }

Only by temporarily disabling the fetch call would I be able to deploy it successfully. Did some Googling and found the following posts:

Any idea on how to solve this?

abdulrcs / abdulrahman.id

FetchError: request to http://localhost:3000/api/views/[BLOG_SLUG] failed, reason: connect ECONNREFUSED 127.0.0.1:3000 #12