Express.js Netlify function not found locally

I used netlify functions:serve to start my function server locally and there is only one function in my directory which is netlify/functions/api.js.

What I have in api.js is the following very simple code, which is returning Cannot GET /api/hello when I access http://localhost:8888/api/hello

import express, { Router } from "express";
import serverless from "serverless-http";

const api = express();

const router = Router();
router.get("/hello", (req, res) => {
  res.send("Hello World!");
});

api.use("/api/", router);

export const handler = serverless(api);

if I access http://localhost:8888/.netlify/functions/api/hello than I get a slightly different error Function not found...

here is my netlify.toml

[functions]
  external_node_modules = ["express"]
  node_bundler = "esbuild"
[[redirects]]
  force = true
  from = "/api/*"
  status = 200
  to = "/.netlify/functions/api/:splat"
[dev]
  functions = "netlify-functions"
  functionsPort = 8888

p.s. I tried netlify deploy and it works perfectly in the preview, here is the link: https://667faf30dd2ceab95f8605ef--test-auth-with-airtable.netlify.app/api/hello

Would be much appreciated if anyone if gimme some insight, thankyou!

Does it work fine in netlify dev?

thanks it works, can I know for when should we use netlify functions:serve over netlify dev?
By reading this doc it said “If you serve functions with a standalone server, you can debug functions without the overhead of starting a framework server.” What is the meaning of a standalone server?

If I recall, the redirects might not work with functions:serve causing the issue.