Theo's Typesafe Cult•11mo ago

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 ?

Routing: Route Handlers

Create custom request handlers for a given route using the Web's Request and Response APIs.

GitHub

Failed to parse URL when fetching localhost using Server Components...

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

5 Replies

ignacio•11mo ago

I had the same problem you just need to create a function getbaseurl that you concat in the begining of your fetch request:

export function getBaseUrl() {
  if (typeof window !== 'undefined') return '';
  const vc = process.env.VERCEL_URL;
  if (vc) return `https://${vc}`;
  return 'http://localhost:8081';
}

export function getBaseUrl() {
  if (typeof window !== 'undefined') return '';
  const vc = process.env.VERCEL_URL;
  if (vc) return `https://${vc}`;
  return 'http://localhost:8081';
}

cailloubleu•11mo ago

Thank you @itonoli, I'll try that 🙂 I will keep this post open if someone has another solution In the end, when I deployed, it was easier to not use an API route. Otherwise, when the VERCEL_URL was used, because the route did not exist before, there was a build error. Don't ask me how but I managed to make it work on the page component while previously I had an error So now it's simple and studip but works!

steakfisher•11mo ago

k so, when fetching a request from the client to the server u can use "/api/whatever" BUT that is not the case when ur making a request from the server back to the same server, u have to use the entire Vercel URL AND UNLESS "use client" is defined at the top of a page, the page is first rendered on the server and THEN sent to the client So in short, if the page is, u can ONLY use fetch("/api/whatever") when there is a "use client" mentioned at the top of the page

steakfisher•11mo ago

for instance this is how my env variables were setup

cailloubleu•11mo ago

Ok I see thank you 🙂

Gaming

Programming

How to fetch local API with App Router