Hello, I have a page where I display three products, when I click on one of these three products I get the json correctly, but when I then refresh one of these productpages to send me the json again, it is empty

here is the getProduct function I use as my serverside component to fetch the data:

import { headers } from "next/headers";
import Image from "next/image";

async function getProduct() {
  const headersList = headers();
  const fullUrl = headersList.get("referer") || "";
  console.log("fullUrl", fullUrl);
  const parts = fullUrl.split("/");
  const id = parts[parts.length - 1];

  const res = await fetch(`${process.env.HOST}/api/basproduct?id=` + id);
  console.log(res);
  if (!res.ok) {
    throw new Error(`HTTP error! status: ${res.status}`);
  }

  return res.json();
}

my route.js:

import { NextRequest, NextResponse } from "next/server";
import { mongooseConnect } from "../../lib/mongoose";
import { BasProdukt } from "../../../models/product";

export const GET = async (req: NextRequest, res: Response) => {
  await mongooseConnect();

  const queryId = req.nextUrl.searchParams.get("id");
  if (queryId) {
    return NextResponse.json(
      await BasProdukt.findOne({ namnUrlified: queryId })
    );
  }
};