While I was experimenting with integrating postgresql into a nextjs project, I encountered an error 405 when trying to create an account.
Below is the error message in the browser console:
page.tsx:14
POST http://localhost:3000/api/auth/signup net::ERR_ABORTED 405 (Method Not Allowed)
handleSubmit @ page.tsx:14
callCallback @ react-dom.development.js:19462
invokeGuardedCallbackImpl @ react-dom.development.js:19511
...
And here is what appeared in my vscode terminal:
` ⨯ Detected default export in 'C:\Users\USER\Desktop\myWorks\webdevproj\loginsys\src\app\api\auth\signup\route.ts'. Export a named export for each HTTP method instead.⨯ No HTTP methods exported in 'C:\Users\USER\Desktop\myWorks\webdevproj\loginsys\src\app\api\auth\signup\route.ts'. Export a named export for each HTTP method.
This is a snippet of my API code used to POST data
import prisma from "@/lib/prisma";
import { NextApiRequest, NextApiResponse } from "next";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method === 'POST') {
try {
const { id, name, email, password } = req.body;
// Check if the user already exists
const existingUser = await prisma.user.findUnique({
where: { email },
});
if (existingUser) {
return res.status(400).json({ error: 'User already exists' });
}
// Create a new user using Prisma
const newUser = await prisma.user.create({
data: {
id,
name,
email,
password,
},
});
return res.status(201).json(newUser);
} catch (error) {
console.error(error);
return res.status(500).json({ error: 'Server error' });
}
} else {
return res.status(405).json({ error: 'Method not allowed' });
}
}
This section pertains to the frontend implementation:
"use client";
import React, { useState } from "react";
export default function SignUp() {
const [id, setId] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
const user = await fetch("/api/auth/signup", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ id, name, email, password }),
});
};
return (
<form onSubmit={handleSubmit} method="POST">
<input
type="text"
placeholder="username"
value={id}
onChange={(e) => setId(e.target.value)}
/>
<input
type="text"
placeholder="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Sign Up</button>
</form>
);
}
I sought assistance from chatgpt regarding this issue as I am relatively new to web development frameworks and struggle with algorithmic thinking.