NextJS TypeScript API Route 404 Error (Not Found)

Question

I'm currently working on a full stack application that is using NextJS, Prisma, and PostgreSQL. I need to obviously make requests to the database to CRUD data. I'm using NextJS's API routes as my way to call on Prisma from server-side to make changes to the PostgreSQL database, since I can't really use Prisma in the client-side environment of NextJS/React.

However, I'm getting errors with my API routes. I'm using Insomnia to send API requests and keep getting 404, 405, or any other error. I have looked at many solutions online, tried redoing my directories and files, but nothing has worked.

This is my directory pages/api as instructed on the NextJS documentation: Screenshot of entire application's directory

Additionally, this is an example of my pages/api/route.ts file: Screenshot of an API route file example

This is the error I get from Insomnia when making a request to the API: Screenshot of 404 error from API request

I've tried looking at other StackOverflow solutions, GitHub solutions, or any other place on the internet with a similar problem but nothing worked. Even tried remaking the directory setup and redoing the tutorial in the NextJS documentation but nothing still works.

hey! shouldn't the call be made to the http://localhost:3000/api/route endpoint? — Sasha
– Sasha, Commented Jan 23, 2024 at 15:36

fsociety · Accepted Answer · 2024-01-23 15:41:38Z

1

you are making the API request to the incorrect URL. In your case, it should be something like

http://localhost:3000/api/route

The error suggests a 404, which means the endpoint is not found.

answered Jan 23, 2024 at 15:41

fsociety

463 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

voxpublius Over a year ago

Tried this in Insomnia. Still getting a 404.

Golamrabbi Azad · Accepted Answer · 2024-01-23 19:42:36Z

0

Why do you need the pages router inside the app router? They are different conventions. So, inside the app router use the api/jobs/route.ts handler, and follow the app router convention to create a router handler. https://nextjs.org/docs/app/building-your-application/routing/route-handlers#convention

answered Jan 23, 2024 at 19:42

Golamrabbi Azad

7855 silver badges16 bronze badges

2 Comments

voxpublius Over a year ago

Tried this but I get the 405 "Method Not Allowed" error.

Golamrabbi Azad Over a year ago

When you get this 405 status code, you are defining a request method and sending another request method. For example, In the route api/jobs handler, you defined a GET method and you're sending a POST request with the route or vice-versa.

Collectives™ on Stack Overflow

NextJS TypeScript API Route 404 Error (Not Found)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related