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.

Answer 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.

Answer 2

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