POST http://localhost:3000/api/register 500 (Internal Server Error) Next JS

Question

I'm experiencing a persistent issue with a specific line of code. Whenever I try to execute it, I encounter a 500 Bad Request error, indicating that something is wrong with the request being sent to the server.

The error message displayed in my console provides some insight:

"POST http://localhost:3000/api/register 500 (Internal Server Error)."

This suggests that there is likely a problem with the server-side processing of the request sent to the '/api/register' endpoint.

To address this issue effectively, it would be helpful to delve into the specifics of the code responsible for making this request, including any relevant request parameters, headers, and the server-side code handling the '/api/register' endpoint. Additionally, examining any accompanying error logs or server-side debugging information could offer valuable clues towards identifying and resolving the underlying cause of the error.

register.tsx

 const handleRegister = async () => {
    if (!firstname || !lastname || !email || !password || !cpassword) {
      setError("All fields are necessary");
      return;
    }

    if (password !== cpassword) {
      setError("Passwords do not match");
      toast.error("Password Do Not Match");
      return;
    }

    try {
      setLoadingIP(true); // Set loading state
      setError(null); // Reset error state

      // Send registration request
      const response = await axios.post("/api/register", {
        firstname: firstname,
        lastname: lastname,
        email: email,
        password: password,
      });

      toast.success(response.data.message); // Show success message to user
      // You may want to redirect the user to a login page after successful registration
    } catch (error) {
      setError("User registration failed"); // Set error message
      console.error("Error during user registration:", error);
      toast.error("User registration failed"); // Show error message to user
    } finally {
      setLoadingIP(false); // Reset loading state
    }
  };

And this is my register.js

import connectdb from "../../../lib/mongodb";
import bcrypt from "bcryptjs"; 
import crypto from "crypto"; 

export default async (req, res) => {
  try {
    if (req.method !== "POST") {
      return res.status(405).json({ message: "Method Not Allowed" });
    }

    let { firstname, lastname, email, password } = req.body;

    const hashedPassword = await bcrypt.hash(password, 10);

    const client = await connectdb;
    const db = client.db("vcut");

    const existingUser = await db.collection("users").findOne({ email });

    if (existingUser) {
      return res.status(400).json({ message: "Email already exists" });
    }

    const currentDate = new Date().toLocaleString();

    const resetToken = crypto.randomBytes(32).toString("hex");

    const result = await db.collection("users").insertOne({
      firstname: firstname,
      lastname: lastname,
      email: email,
      password: hashedPassword, 
      registrationDate: currentDate, 
      token: resetToken
    });

    if (result.insertedCount === 1) {
      console.log(`User registered successfully at ${currentDate}`); 
      return res.status(201).json({ message: "User registered successfully" });
    } else {
      console.error("Failed to insert user into the database:", result);
      return res.status(500).json({ message: "User registration failed: Unable to insert user into the database" });
    }
  } catch (error) {
    console.error("Error during user registration:", error);
    return res.status(500).json({ message: "User registration failed: Internal Server Error" });
  }
};

I'm trying to solve the 500 bad request I'm facing.