next.js: Failed to parse URL when fetching localhost using Server Components

I found this solution and it works fine:

async function getData() {
  const res = await import("../api/top-rated/route");  <---- this is the location of my api file

  return await (await res.GET()).json();
}

    const host = headers().get("host");

What if you’re not using Server Components and still getting the Failed to parse URL error?

if you are not using a server component you can directly call with a relative URL

fetch('/api');

I found this solution and it works fine:

async function getData() {
  const res = await import("../api/top-rated/route");  <---- this is the location of my api file

  return await (await res.GET()).json();
}

How do you pass query params in this case?

Got it. However, I could expect it to know the absolute URL when using dynamic data fetches, because Next knows the requested URL.

Besides that, I think throwing a more guiding error will help. Something like “Failed to parse URL. Pass an absolute URL when using server components”

async function getAllPosts(){
    const host = headers().get("host");
    const protocal = process?.env.NODE_ENV==="development"?"http":"https"
    let res = await fetch(`${protocal}://${host}/api`, { cache: "no-store" });
    let posts = res.json();
    return posts;
}

guys try this.

any update about it? I have found the same solution but methods needs request and param but they are sended by url

I found this solution and it works fine:

async function getData() {
  const res = await import("../api/top-rated/route");  <---- this is the location of my api file

  return await (await res.GET()).json();
}

How do you pass query params in this case?

Is it a valid way to fix this by using the host header to construct the absolute API URL? That should work both in development and production environment if I’m not mistaking.

import { headers } from "next/headers";

const fetchData = async (host: string) => {
  const res = await fetch(`http://${host}/api/quizzes`);
  return res.json();
};

export default async function Dashboard() {
  const host = headers().get("host");
  const data = await fetchData(host!);

  return <div>{JSON.stringify(data)}</div>;
}

Yeah, but that’s a fetch, a native API to node, that’s crashing. Not sure it’s a good idea to hijack that.

Another framework, Nuxt, uses $fetch, made by them to allow for the request to call into the API route from the server. https://nuxt.com/docs/guide/concepts/server-engine#direct-api-calls

Without such helpers, the problem is that you’d be making yet another request round trip, when you are already at the server side.

So you should just invoke the data you want directly, that’s one of the reasons we are writing the components on the server.

That means connecting to your database or data endpoints from the server component without having to involve API routes at all.

I see, it’s true that the request is really redundant when I can just import the function directly, and it’s even typesafe because I don’t need to cast the response after fetching. Thanks 😃

If you run the node REPL, in node 18+, and write fetch("/api/route"), what would you expect? It is similar in Server Side code, namely GetServerSideProps, GetStaticProps, and Server Components.

That is to say that you need an absolute URL. The browser, per spec IIRC, assumes paths relative to the document base URL/origin or something like that.

• https://url.spec.whatwg.org/#url-writing

It is a fun read 😅

This is even happening in client components, is that expected?

What is the correct way to “opt out” of code running on the server? Docs (https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic-rendering) seem to suggest that using the useSearchParams() hook will ensure components do not render on server, but that does not seem to be the case (on v13.4.7).

Because server components run on the server, they essentially act like a node server. That’s why requesting ‘/path’ won’t resolve (same behavior as a regular server). You need to specify absolute paths for the URL to be parsed (e.g ‘http://localhost/path’)

any update about it? I have found the same solution but methods needs request and param but they are sended by url

I found this solution and it works fine:

async function getData() {
  const res = await import("../api/top-rated/route");  <---- this is the location of my api file

  return await (await res.GET()).json();
}

How do you pass query params in this case?

I used the following technique and we can pass query params by adding question mark after the ‘api/test?id=123’. the url itself doesn’t matter as we know which api function we are calling and only require query params.

import { NextRequest } from ‘next/server’

import TestListClient from ‘./list’; async function getData() { const apis = await import(‘…/…/api/test/route’); const body = await (await apis.GET(new NextRequest(‘http://localhost/api/test’))).json() return body.data; }