Getting 500 code error connecting MongoDB with Next.JS. Need help please

HI,
I saw someone post similar question before but they didn’t get any response so I’ll try asking this question again.

I’m having trouble connecting mongoDB with Next.js but I got code 500 as a response.

I saved the connection string inside env.local files

.env.local
MONGODB_URI=mongodb+srv://Cluster55455:My_Password@cluster55455.s1r5ypv.mongodb.net/?retryWrites=true&w=majority&appName=Cluster55455
// lib/mongodb.js

import { MongoClient } from 'mongodb';

const uri = process.env.MONGODB_URI; 
const options = {
  useUnifiedTopology: true,
  useNewUrlParser: true,
};

let client;
let clientPromise;

if (!process.env.MONGODB_URI) {
  throw new Error('Please add your Mongo URI to .env.local');
}

if (process.env.NODE_ENV === 'development') {
  // In development mode, use a global variable so the database connection
  // is preserved between hot reloads.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options);
    global._mongoClientPromise = client.connect();
  }
  clientPromise = global._mongoClientPromise;
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options);
  clientPromise = client.connect();
}

export default clientPromise;

// pages/api/data.js

import clientPromise from '../../lib/Mongodb'

export default async function handler(req, res) {
  const client = await clientPromise;
  const db = client.db("Cluster55455");

  if (req.method === 'POST') {
    // Add data to the database
    const data = req.body;
    await db.collection('user_account').insertOne(data);
    res.status(201).send({ success: true });
  } else if (req.method === 'GET') {
    // Retrieve data from the database
    const data = await db.collection('user_account').find({}).toArray();
    res.status(200).json(data);
  }
}

``

Here I'm trying to pushed user inputs from a sign up form to the database :

axios.post(‘http://localhost:3000/api/data’, data, {
headers: {
‘Content-Type’: ‘application/json’,
},
}).then(response => {
console.log(“successfully added”, data, response.data);
}).catch(err => {
console.error(“oops”, err);
return false;
});


I'm not sure what i'm doing wrong here. I've seen alot of tutorial and my code seems to be very similar to the tutorials. 

I've attach my file structure as reference as well. 
![CleanShot 2024-04-03 at 9 .27.52@2x|244x500](upload://mfMQkRjVqNqIbuLaS2sqaZgHTf.png)

Okay, my format at the end got a little messed up so heres the last part

axios.post(‘http://localhost:3000/api/data’, data, {
headers: {
‘Content-Type’: ‘application/json’,
},
}).then(response => {
console.log(“successfully added”, data, response.data);
}).catch(err => {
console.error(“oops”, err);
return false;
});

and the attachment