Getting 404 page while serving the build of the NextJs App while its running fine in the development mode

Question

I am pretty new to React/Next JS. So here's my issue. I have purchased a theme and made changes to the config and branding part. Now when I run the app using "yarn dev" and "yarn start", it is working fine. "yarn build" also creates an optimized production build. I wanted to deploy the app locally in my PC and i was trying to learn things through youtube videos. so in one of the videos i found this command ("prod": "next build && serve build") to include in package.json. my package.json file has the following scripts.

"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "export": "next export", "lint": "eslint --fix "src//*.{js,jsx}"", "format": "prettier --write "src//*.{js,jsx}"", "prod": "next build && serve build" },

so when i try with "yarn prod", it is first creating an optimized build and then i get the following output in the vscode terminal

however if i try to open "http://localhost:3000" in my browser. i get 404 error. but not with "yarn dev" or "yarn start". no error while building the app too.