Why does my backend routeing not work?
Answered
Peruvian anchoveta posted this in #help-forum
Peruvian anchovetaOP
frontend
backend code
const submitDialogData = async () => {
setError({ message: null });
try {
const response = await fetch('../api/auth/signup/route', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({email, pass}),
});
const responseData = await response.json();
if(!response.ok) {
alert("Failiure!");
throw new Error(responseData.error || 'Sign Up error');
}
console.log('Signup successful:', responseData);
alert("Success!");
} catch (err){
if (err instanceof Error) {
setError({ message: err.message });
} else {
setError({ message: 'An unexpected error occurred' });
}
}
}backend code
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
try {
const reqBody = await request.json();
const { email, pass } = reqBody;
if (!email || !pass) {
return NextResponse.json({ error: "Missing email or password" }, { status: 400 });
}
console.log("Received email:", email);
console.log("Received pass:", pass);
return NextResponse.json({ message: "Signup successful" }, { status: 200 });
} catch (error: any) {
return NextResponse.json({ error: error.message || "An unexpected error occurred" }, { status: 500 });
}
}Answered by let headache = null()
/api/
│ │ └── auth
│ │ ├── login
| | └── route.ts
│ │ ├── register
│ │ └── route.tsx
│ │ └── auth
│ │ ├── login
| | └── route.ts
│ │ ├── register
│ │ └── route.tsx
49 Replies
@let headache = null() Try without `../api/` instead `/api/auth/signup/route.ts`
Peruvian anchovetaOP
i just get "POST /api/auth/signup/route.tsx 404" in both cases
same for .ts
try restarting your app
and send your file structure
Peruvian anchovetaOP
tried
will send
try destructuring and logging the
well im not sure if u need to await
email and password once a request comes like this:const { email, pass } = await request.json()
console.log(email, pass)well im not sure if u need to await
Peruvian anchovetaOP
just a sec
@Anay-208 and send your file structure
Peruvian anchovetaOP
.
├── app
│ ├── api
│ │ └── auth
│ │ ├── login.ts
│ │ ├── signup
│ │ │ └── route.tsx
│ │ └── signup.ts
│ ├── components
│ │ ├── accountloginbutton.tsx
│ │ ├── accountmenu.tsx
│ │ ├── accountsignupbutton.tsx
│ │ ├── burgermenu.tsx
│ │ ├── icons
│ │ │ ├── accounticon.tsx
│ │ │ ├── accountplusicon.tsx
│ │ │ ├── burgermenuicon.tsx
│ │ │ ├── closeicon.tsx
│ │ │ ├── eyeicon.tsx
│ │ │ ├── magnifyicon.tsx
│ │ │ ├── noeyeicon.tsx
│ │ │ ├── tagsiconoutline.tsx
│ │ │ ├── tagsicon.tsx
│ │ │ └── tagssearch.tsx
│ │ ├── logindialog.tsx
│ │ ├── logo.tsx
│ │ ├── navbar.tsx
│ │ ├── picdialog.tsx
│ │ ├── searchbar.tsx
│ │ ├── signupdialog.tsx
│ │ └── videogrid.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components
│ └── ui
│ ├── alert.tsx
│ ├── button.tsx
│ ├── dropdown-menu.tsx
│ ├── input.tsx
│ ├── pagination.tsx
│ ├── popover.tsx
│ ├── skeleton.tsx
│ └── tooltip.tsx
├── components.json
├── eslint.config.mjs
├── lib
│ ├── prisma.ts
│ ├── userUtils.ts
│ └── utils.ts@let headache = null() there's the issue u dont make auth/login.ts
he isn't facing issue with login route
auth/login/route.ts@Anay-208 he isn't facing issue with login route
it'll conflict so there wouldn't be any requests
/api/
│ │ └── auth
│ │ ├── login
| | └── route.ts
│ │ ├── register
│ │ └── route.tsx
│ │ └── auth
│ │ ├── login
| | └── route.ts
│ │ ├── register
│ │ └── route.tsx
Answer
@Anay-208 try changing extension to ts and restart server
Peruvian anchovetaOP
already did
Yellow-bellied Flycatcher
Should you be putting 'route ' in url?
@Peruvian anchoveta already did
Peruvian anchovetaOP
and tried removing ..
@let headache = null() /api/
│ │ └── auth
│ │ ├── login
| | └── route.ts
│ │ ├── register
│ │ └── route.tsx
Peruvian anchovetaOP
ill try this
@Yellow-bellied Flycatcher Should you be putting 'route ' in url?
Peruvian anchovetaOP
and this
@Anay-208 .
he said he did that
First try using postman to send a request to that uri, to narrow down the issue
did u try logging the email, pass??
Peruvian anchovetaOP
sorry im unfamiliar, what is postman?
then are u facing any issues once request being sent?
Yellow-bellied Flycatcher
Try localhost:3000/API/signup on your fetch method.
you can basically send the request your frontend would send
@Yellow-bellied Flycatcher Should you be putting 'route ' in url?
Peruvian anchovetaOP
same thing btw
@Yellow-bellied Flycatcher Try localhost:3000/API/signup on your fetch method.
Peruvian anchovetaOP
cannot find this page 404
@Peruvian anchoveta same thing btw
Yellow-bellied Flycatcher
Not the 'route' is not part of the uri
Peruvian anchovetaOP
sec
or it wouldn't work trust me
@Peruvian anchoveta cannot find this page 404
I don't think you've a GET route, so just try using postman
Peruvian anchovetaOP
it was a file structure issue!
Peruvian anchovetaOP
@let headache = null() you were right
Peruvian anchovetaOP
i will post my current files struct if someone finds this later
.
├── app
│ ├── api
│ │ └── auth
│ │ └── signup
│ │ └── route.tsx
│ ├── components
│ │ ├── accountloginbutton.tsx
│ │ ├── accountmenu.tsx
│ │ ├── accountsignupbutton.tsx
│ │ ├── burgermenu.tsx
│ │ ├── icons
│ │ │ ├── accounticon.tsx
│ │ │ ├── accountplusicon.tsx
│ │ │ ├── burgermenuicon.tsx
│ │ │ ├── closeicon.tsx
│ │ │ ├── eyeicon.tsx
│ │ │ ├── magnifyicon.tsx
│ │ │ ├── noeyeicon.tsx
│ │ │ ├── tagsiconoutline.tsx
│ │ │ ├── tagsicon.tsx
│ │ │ └── tagssearch.tsx
│ │ ├── logindialog.tsx
│ │ ├── logo.tsx
│ │ ├── navbar.tsx
│ │ ├── picdialog.tsx
│ │ ├── searchbar.tsx
│ │ ├── signupdialog.tsx
│ │ └── videogrid.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components
│ └── ui
│ ├── alert.tsx
│ ├── button.tsx
│ ├── dropdown-menu.tsx
│ ├── input.tsx
│ ├── pagination.tsx
│ ├── popover.tsx
│ ├── skeleton.tsx
│ └── tooltip.tsx
├── components.json
├── eslint.config.mjs
├── lib
│ ├── prisma.ts
│ ├── userUtils.ts
│ └── utils.ts
├── next.config.ts
├── next-env.d.ts
├── node_modules