fetch(`${process.env.BASE_API_URL}/api/Users/${id}`)

fetch(`/api/Users/${id}`)

fetch(`https://${process.env.VERCEL_URL}/api/Users/${id}`)

[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: '1941507617'
}

"use server";

export default async function SomeComponent() {
  console.log(JSON.stringify(YOUR_URL_SRTING_HERE));
  return <div>test1</div>;
}

export default function Home() {
  const url = process.env.VERCEL_URL;
  return <div>url: {url}</div>;
}

export async function GET(req: Request) {
  return new Response("WHATEVER_INFO_TO_DISPLAY", {
    status: 200,
  });
}

const res = await fetch('YOUR_URL',{cache:'no-store'});

So when I deploy in Vercel, I give all my environnement variable except this "BASE_API_URL", and this because i need the URL of my site to put it in my environnement variable later as the BASE_API_URL.

const getContacts = async () => {
  const baseUrl =
    process.env.NODE_ENV === "production"
      ? `https://${process.env.VERCEL_URL}`
      : "http://localhost:3000";
  try {
    const res = await fetch(`${baseUrl}/api/Contacts`, {
      cache: "no-store",
    });
    return res.json();
  } catch (err) {
    console.log("failed to get ticket");
  }
};