Next.js API Routes work on development but 404 on production

Question

In my next.js website, I have an api endpoint at /pages/api/views/[slug].js, which fetches the amount of views from a database (supabase) of each of my blogs. The setup works fine in my development server, (npm run dev), but when I deploy the app to production, all the API calls to the /pages/api/views/[slug].js endpoint return 404, saying that there is no page there.

I have set env variables in vercel's dashboard.

Additionally, when I try calling the default /pages/api/hello endpoint, I also get a 404 error.

Production website: https://www.ganning.me/blog

GitHub Repo: https://github.com/ganning127/ganning.me

hello.js

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Answer 1

/pages/api/hello

Please remove pages from url then try it will work.(/api/hello)