making POST request to MySQL in NextJS using Server Actions

This is my first request ever using NextJS and server actions, i'm using NextResponse to send back responses from server to client component, but it's not working as i get an error Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported:

db.js

import mysql from "mysql2/promise";
let connection;

export const createConnection = async () => {
  if (!connection) {
    connection = await mysql.createConnection({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_NAME,
      port: process.env.DB_PORT,
    });
  }

  return connection;
};

actions.js

"use server";
import { createConnection } from "@/db";
import { NextResponse } from "next/server";
export async function login(data) {
  const { email, password } = data;
  try {
    const db = await createConnection();
    const [user] = await db.query(
      "SELECT id,firstName,lastName, image,DATE_FORMAT(birth_date, '%Y-%m-%d') as birthDate,gender, position, email, role, password,status FROM `users` WHERE email = ? AND status = 'approved'",
      [email]
    );
    if (user.length == 0) {
      return NextResponse.json({ message: "Invalid credentials." }, { status: 400 });
    }
    console.log(user);
    return NextResponse.json(user);
  } catch (error) {
    return NextResponse.json({ error: error.message });
  }
}

I found out that the error is caused by this line:

    return NextResponse.json({ message: "Invalid credentials." }, { status: 400 });

which maybe means that the query execution is wrong, but as you see im returning an object still, but it doesn't return the response, it rathers returns error, and even if i changed it to something like this:

    return "empty user";

it still returns nothing (empty response)

page.js

"use client";
import { useForm } from "react-hook-form";
import { login } from "../actions";
const LoginForm = () => {

  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    },
    reValidateMode: "onSubmit",
  });

  const {
    ...
    handleSubmit,

  } = form;


return(
<form onSubmit={handleSubmit(login)>
...
<button type="submit">submit</button>
</form>
)



}

i also made sure of the database strings and that XAMPP is running, and even if something was wrong like wrong database name or user, i still should be getting a response am i wrong ?

Next.js server actions do not directly support HTTP response codes like traditional HTTP methods do. Instead, you must return a plain JavaScript object containing a status (or statusCode) property to indicate the response status. For example:

return { status: false, statusCode: 404, message: "My Message" };

To handle the response correctly on the client-side, treat the server action function as an asynchronous function using await:

const myResult = await myServerAction();

This allows you to extract the status, statusCode, and message from the returned object and handle the response accordingly within your client-side logic. you can use react query hooks to get the loading, error an other helpers as well.