Export a named export for each HTTP method error when submitting form to API

Question

I've successfully connected my app to a postgres database - using prisma (I've set up a seed.ts file, pushed it and the data is sent to the database).

The problem I'm having is creating the api endpoint using route.js in my api folder.

I'm trying to get one my sign up forms to submit data to the postgres database - but I keep receiving this error (have spent hours searching the forums for an answer) and I'm not sure why.

• error Detected default export in '/app/api/admin/route.js'. Export a named export for each HTTP method instead.
• error No HTTP methods exported in 'app/api/admin/route.js'. Export a named export for each HTTP method.

And in the console, I'm receiving this after every form submit

Failed to load resource: the server responded with a status of 405 (Method Not Allowed)

Here is the route.js file

import prisma from "../../lib/prisma";

export default async function handler(req, res) {
  const { name, password, email } = req.query;

  try {
      const newUer = await prisma.User.create({
          data: {
              name,
              email,
              password
          },
      });

      res.json({ user: newUer, error: null });
  } catch (error) {
      res.json({ error: error.message, user: null });
  }
}

Form code

"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/admin", {
            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>

    );
}

Answer 1

According to the official website:

To handle different HTTP methods in an API route, you can use req.method in your request handler, like so:

if method not applied, it'll automatically return 405 status

import { NextResponse } from 'next/server'
       
export async function POST() {   
   return NextResponse.json({message:'method allow'})
}