How can I replicate the vanilla behavior of NextJS API routing in T3 stack?

I am currently working on a project in which i would like to have my server side requests to an endpoint that is not on my local host using axios and REST. Currently, I am placing my server side requests to the endpoint at src/pages/api/locations/route.ts, and the client side consumer at src/pages/fakerequest/index.tsx. The problem I am facing is a 404 when the client tries to fetch data from my serverside request, I tried consuming this on Postman but i get the same 404 error. I have read the documentation regarding project structure but I don't understand this particular issue considering my authentication routing works, i hope someone can help me with this please! Here is the relevant code: https://share.riseup.net/#e6cDhcMxsvDXt6ACyhO0Sg
I
ibby13d ago
You're mixing up pages & app router api routing Pages router: src/pages/api/locations.ts -> http://localhost:3000/api/locations App router: src/app/api/locations/route.ts -> http://localhost:3000/api/locations
I
Ivan10d ago
Hey! thanks for the quick reply! i am a bit confused by your answear: in which folder do i have to place the code that is going to fetch data from the back end? in which folder do i have to place the code that is going to display the ui in the web browser with the data i fetched from the backend? Best regards!