How to fetch local API with App Router

Hello everyone,

I have created several apps with CRA on the past few years and don't have a lot of experiences with Nextjs
I jumped into it for a year now and when App Router launched, I tried to do my new projects with that framework.
However, I am now stuck with what looks like a simple task.

I wanted to do a fetch request a public API. Bummer I have a problem with CORS.
Therefore I put my request in a API route like this https://nextjs.org/docs/app/building-your-application/routing/route-handlers
Cool, it works.

What don't work now is that when I do fetch(/api/monitors) I have this error: TypeError: Failed to parse URL from /api/monitors
I found people having the same issue and this solution works : https://github.com/vercel/next.js/issues/48344#issuecomment-1637007616

This kind of writing was not necessary before, right ?
Server components is such a headache for me... Will this solution even work in production deployed on Vercel ?
Is there a simpler solution ?
Create custom request handlers for a given route using the Web's Request and Response APIs.
Routing: Route Handlers
GitHub
Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: linux Arch: x64 Version: #22 SMP Tue Jan 10 1...
Failed to parse URL when fetching localhost using Server Components...
Was this page helpful?