Reactjs – 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.