Next JS - TypeError: resolver is not a function

Question

I want to add a record to my database but somehow i get a typeError I'm using a mysql server and next js 13. My guess is that i'm doing something wrong with the async functions. I tried removing some and just logging the data in my api file but still no luck.

This is my API file

import executeQuery from "@/pages/api/db";


export async function handler(req, res){
  if(req.method === "POST"){
    const data = req.body;
    // console.log(data);
    const { naam, email, telefoon, datum, aantal, aankomst, opm  } = data;


    // add reservering in reserv table
    const result = await executeQuery(
      `INSERT INTO reservering (naam, email, telefoon, datum, aantal, aankomst, opm) VALUES (${naam},${email},${telefoon},${datum},${aantal},${aankomst},${opm})`,
      );
    // check if email is in email_voorkeur table

    // if in not in add in table

    //same with telefoon


    console.log(result);
    res.status(201);
  }
}

And my index file with my form

import logo from "../../public/logo.png";
import Form from "@/components/ui/form";

import { Fragment } from "react";

export default function HomePage() {
  async function addReservHandler(data) {
    console.log(data);
    const response = await fetch('/api/newReserv',{
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json'
      }
    });
    // console.log(response.json());
  }

  return (
    <Fragment>
      <div>
        <h1>Reserveringen</h1>
        <img src={logo} alt="logo DevikingODK" />
      </div>
      <div>
        <Form onAddReserv={addReservHandler} />
      </div>
    </Fragment>
  );
}

The form file if you would wanna test it

import { Fragment, useRef } from "react";

export default function Form(props) {
  const naamInputRef = useRef();
  const emailInputRef = useRef();
  const telefoonInputRef = useRef();
  const datumInputRef = useRef();
  const aantalInputRef = useRef();
  const aankomstInputRef = useRef();
  const opmInputRef = useRef();

  function submitHandler(event) {
    event.preventDefault();

    const enteredNaam = naamInputRef.current.value;
    const enteredEmail = emailInputRef.current.value;
    const enteredTelefoon = telefoonInputRef.current.value;
    const enteredDatum = datumInputRef.current.value;
    const enteredAantal = aantalInputRef.current.value;
    const enteredAankomst = aankomstInputRef.current.value;
    const enteredOpm = opmInputRef.current.value;

    const reservering = {
      naam: enteredNaam,
      email: enteredEmail,
      telefoon: enteredTelefoon,
      datum: enteredDatum,
      aantal: enteredAantal,
      aankomst: enteredAankomst,
      opm: enteredOpm,
    };

    props.onAddReserv(reservering);
  }

  return (
    <Fragment>
      <form method="POST" onSubmit={submitHandler}>
        <label>
          Naam:
          <input type="text" name="naam" ref={naamInputRef}/>
        </label>
        <label>
          E-mail:
          <input type="text" name="email" ref={emailInputRef}/>
        </label>
        <label>
          Telefoon:
          <input type="tel" name="telefoon" ref={telefoonInputRef}/>
        </label>
        <label>
          Datum:
          <input type="date" name="datum" ref={datumInputRef}/>
        </label>
        <label>
          Aantal:
          <input type="number" name="aantal" ref={aantalInputRef}/>
        </label>
        <label>
          Aankomstuur:
          <input type="time" name="tijd" ref={aankomstInputRef}/>
        </label>
        <label>
          Opmerking:
          <input type="text" name="opmerking" ref={opmInputRef}/>
        </label>
        <button>Reserveren</button>
      </form>
    </Fragment>
  );
}

EDIT: the full on error message

error - TypeError: resolver is not a function
    at Object.apiResolver (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\api-utils\node.js:372:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async DevServer.runApi (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\next-server.js:488:9)
    at async Object.fn (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\next-server.js:751:37)
    at async Router.execute (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\router.js:253:36)
    at async DevServer.run (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\base-server.js:384:29)
    at async DevServer.run (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\dev\next-dev-server.js:743:20)
    at async DevServer.handleRequest (C:\Users\cuyve\Desktop\VIKING\reserveringViking\node_modules\next\dist\server\base-server.js:322:20) {
  page: '/api/newReserv'
}

Answer 1

I found the issue myself. I had to export my function with the 'default' parameter.