Struggling to find the cause of undefined params
Currently delving into the world of Nextjs api routes, I keep encountering an issue where my params are coming up as undefined when trying to use them in the HTTP method.
My setup includes prisma as my ORM and PlanetScale as my database provider.
Below is an example of the api route I have created:
import { NextRequest, NextResponse } from "next/server";
import prisma from "@/lib/prisma";
type parameters = {
req: NextRequest;
res: NextResponse;
};
export const POST = async ({ req }: parameters) => {
console.log(req);
const result = await prisma.meetUp.create({
data: {
title: "some title here because I can't get the request body",
description: "pls help me",
},
});
return NextResponse.json(result);
};
Each req log is showing Undefined
Provided below is the front-end component utilizing this post method:
"use client";
import axios from "axios";
import { ChangeEvent, useState } from "react";
const MeetUpForm = () => {
const [meetUp, setMeetUp] = useState({ title: "", description: "" });
const submitData = async (e: React.SyntheticEvent) => {
e.preventDefault();
try {
await axios.post("api/meet", meetUp);
} catch (error) {
console.error(error);
}
};
const changeValue = (e: ChangeEvent<HTMLInputElement>) => {
setMeetUp({
...meetUp,
[e.target.name]: e.target.value,
});
};
return (
<form className="border-solid border-black" onSubmit={submitData}>
<h1>Create new meet up</h1>
<input
type="text"
name="title"
placeholder="title"
onChange={changeValue}
value={meetUp.title}
/>
<input
name="description"
type="text"
placeholder="description"
onChange={changeValue}
value={meetUp.description}
/>
<input type="submit" onChange={changeValue} value="Create" />
</form>
);
};
export default MeetUpForm;
I'm striving to properly fetch these params to successfully post the request body to the database.