Question 242499 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – NextJS 13 form not submitting data through Prisma to Postgres Database

I’ve spent the last day trying to figure this one out, with little progress made.

I’ve successfully connected my app to a postgres database, setup the prisma schema and tested a migration with a seed.ts file.

Now my route.js file has been causing me all kinds of errors, and while I can’t get an error to display in the console when the form is submitted; no data is being sent through my sign up form into the database, and I have no idea why.

I’ve already gone through numerous nextjs 13 API forum posts on here, google search, and watched a few youtube videos. There appears to be an issue with the route.js file and maybe the API handler, but I don’t know what to debug at this point.

Any help 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' })
        
    }
}

form

Page.js


"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>

    );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    For anybody that comes across this issue, here is the code that resolved my issue - the form now submits the form data, through Prisma, into my local Postgres database

    Route.js - Server component

    
import { NextResponse } from 'next/server';
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function POST(request) {

    const { name, password, email } = await request.json()

    const user = {
        name,
        email,
        password,
    }

    let createUser = await prisma.user.create({ data: user })


    return NextResponse.json(user)

}

    page.js - Client Componenent

    "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) => {
        try {
            const response = await fetch("/api/createuser", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(data),
            });

            if (response.ok) {
              
                router.push("/login");
                reset();
            } else {
              
                console.error("Registration failed");
            }
        } catch (error) {
            console.error("Error:", error);
        }
    };

    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("email", { required: true })}
                    type="email" 
                    id="email"
                    placeholder="Email Address"
                    aria-invalid={errors.email ? "true" : "false"}
                />
                {errors.email && <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>
    );
}

  2. 0

    What you did in your API route handler to grab the JSON data sent by the form is the way with the pages router. Since you are using the app router, you do it as below, as you can read on the doc:

    import { NextResponse } from 'next/server'
 
export async function POST(request) {
  const { name, password, email } = await request.json()
  // ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search