I am using Nextjs 13 (v13.4.4). In my app I have CSR components that use my internal API. The API endpoints and routes have been configured according to the official documentation guidelines (https://nextjs.org/docs/app/building-your-application/routing/route-handlers).

From my client side rendered component, I want to call fetch (or axios) functions to hit the API endpoints in my internal API (aka BFF). But I want to be able to reference these endpoints without using relative pathing, as opposed to having to specify an absolute path. This should be possible seeing that relative pathing was possible in Nextjs 12, unless this has been a fundamental and breaking change in Nextjs 13.

The reason why this is important is because we are working with Vercel (very common to many projects) for our deployments and each PR is being deployed to its own preview deployment, which means the URL changes and we have to currently physically update a ENV variable to make the client access to the API work, which means a double build and also a manual intervention each time for a PR to be tested.

So, I want to know if it is possible for this:

export const fetchNftDetails = async (args: FetchNftDetailsArgs) => {
  const { slug, tokenId } = args;
  const res = await fetch(
    `http://localhost:3000/api/nfts/details?slug=${slug}&token_id=${tokenId}`,
    commonHeaders
  );
  const data = await res.json();
  const response = data?.data?.data;

  return response;
};

to become this (which is how it worked in Nextjs 12):

export const fetchNftDetails = async (args: FetchNftDetailsArgs) => {
  const { slug, tokenId } = args;
  const res = await fetch(
    `/api.nfts/details?slug=${slug}&token_id=${tokenId}`,
    commonHeaders
  );
  const data = await res.json();
  const response = data?.data?.data;

  return response;
};

Thanks in advance for any help.