Why Backend deployment show 404 error message when deploy project on Vercel?

I'm currently trying to deploy my MERN application's backend on Vercel.

Before this try, I learned to deploy the MERN site on Vercel by small todo project. I work fine now and I do the same for the following project. but it shows a 404 error

This is my file structure

This is my package.json

{ "name": "backend", "version": "1.0.0", "description": "simple mern note taking application for open ended assignment", "main": "server.js", "engines": { "node": "20.x" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "nodemon server.js" }, "author": "baos sora", "license": "ISC", "dependencies": { "cors": "^2.8.5", "dotenv": "^16.4.5", "express": "^4.18.3", "mongodb": "^6.5.0", "mongoose": "^8.2.3", "node-cron": "^3.0.3", "nodemon": "^3.1.0" } } 

this is my vercel.json

{ "version": 2, "builds": [{ "src": "./server.js", "use": "@vercel/node" }], "routes": [ { "src": "/(.*)", "dest": "/" } ] } 

this is my env

URL= worked url from mongodb PORT=3000 

This is my server.js

//import required modules const express = require('express'); require('dotenv').config(); const mongoose = require('mongoose'); const cors = require('cors'); const NoteRoutes = require('./routes/noteRoutes') const { getCategory, deleteCategory, getOneCategryData } = require('./controller/categoryController') const { getDynamicNoteData, DeleteInActiveNotes, AutoHardDeleteNotes } = require('./controller/noteController') //initialize express app const app = express(); // Middleware to parse incoming requests with JSON app.use(express.json()) //middleware to handle Cors policy app.use(cors()); app.get('/', (req, res) => { res.json({ message: 'Welcome to Note API' }) }) app.use('/note', NoteRoutes) //manually create routes because of casting issues app.get('/search', getDynamicNoteData) app.delete('/remove', DeleteInActiveNotes) app.get('/category', getCategory) app.get('/category/:id', getOneCategryData) app.delete('/category/:id', deleteCategory) const PORT = process.env.PORT || 5000; const URL = process.env.URL; //establish the connection to MongoDB database using Mongoose mongoose.connect(URL) //if the connection is successful display the success messages .then(() => { console.log("Connected with MongoDB"); //call auto deletion function AutoHardDeleteNotes() //app listening port app.listen(PORT, () => { console.log("Server is running on port " + PORT); }) }) //if there is an error on connecting show display the error message .catch(err => { console.log("Application has Following Errors: \n" + err); }) 

This shows when I deploy the project

Please help me find this issue. this is my internship's 2nd round open-ended assignment the deadline ends tomorrow. Until today I only used Netlify. but their guideline said need to add in Vercel.