After spending hours trying to solve this issue, I've hit a roadblock. My current project is using Next.js 13.
I managed to successfully connect my application to a Postgres Database, configure the Prisma schema, and test a migration with a seed.ts file.
The problem arises in my route.js file, which is causing various errors. When I submit the form, no data is being transmitted to the database, and I'm unable to identify why there's no error displaying in the console.
I've scoured through multiple Next.js 13 API forums, conducted Google searches, and watched YouTube tutorials. It seems like there might be an issue with the route.js file or possibly the API handler, but I'm stuck at this point without knowing what to debug.
Any assistance on this matter would be greatly appreciated.
route.js:
import { NextResponse } from 'next/server';
import { PrismaClient } from "@prisma/client";
const prisma = new PrismaClient();
export async function POST(req) {
const { name, password, email } = req.body;
try {
const user = await prisma.user.create({
data: {
name,
email,
password
},
});
return NextResponse.json({ message: 'method allow' })
} catch (error) {
return NextResponse.json({ message: 'error' })
}
}
page.js (containing the form):
"use client";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import Link from "next/link";
export default function SignUp() {
const { register, reset, formState: { errors }, handleSubmit } = useForm();
const router = useRouter();
const onSubmit = async data => {
console.log(data);
const user = await fetch("api/createuser", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
/*if (Object.keys(errors).length === 0) {
router.push("/login");
}
reset();
*/
}
return (
<div>
<h1 className="signUp">Sign up</h1>
<form onSubmit={handleSubmit(onSubmit)} className="signUpForm">
<input
{...register("name", { required: true })} id="first" placeholder="Name"
aria-invalid={errors.name ? "true" : "false"}
/>
{errors.name?.type === 'required' && <p className="errorMessageOne" role="alert">First name is required</p>}
<input {...register("mail", { required: true })} type="mail" id="email" placeholder="Email Address"
aria-invalid={errors.mail ? "true" : "false"} />
{errors.mail && <p className="errorMessage" role="alert">Please enter a valid email address</p>}
<input {...register("password", { required: true, minLength: 4 })} id="password" placeholder="Password must contain a minimum of 8 characters"
aria-invalid={errors.password ? "true" : "false"} />
{errors.password && <p className="errorMessage" role="alert">Please enter a valid password</p>}
<button type="submit" className="signSubmit">Submit</button>
<p className="alreadyText"> Already have an account? <Link href="/login"><span>Login</span></Link></p>
</form>
</div>
);
}