NextJS req.url is giving wrong URL

I have set a link on product card to '/product/hansgrohe-croma-100-shower-set-100-4jet-vario-27592000' and in the custom product page [product].js I am calling the server side API (using SSR) I have to pass the url to backend to fetch the product detail. In order to do that I need access to current URL which nextjs gives as {req.url} in SSR, In my case I am getting output as '/_next/data/development/en/product/hansgrohe-croma-100-shower-set-100-4jet-vario-27592000.json?product=hansgrohe-croma-100-shower-set-100-4jet-vario-27592000' in localhost. In dev server it might work but how do I get the actual URL in localhost?

 const fullUrl = req.url;
 console.log(fullUrl); // Prints this '/_next/data/development/en/product/hansgrohe-croma-100-shower-set-100-4jet-vario-27592000.json?product=hansgrohe-croma-100-shower-set-100-4jet-vario-27592000'

I'm not sure of your requirements but you can use the context parameter of the getServerSideProps function to access the request object and its properties, such as headers, query, params, etc.

For example:

export async function getServerSideProps(context) {
  const req = context.req;
  const host = req.headers.host;
  const path = context.params.product;
  const query = context.query;
  const fullUrl = `http://${host}/product/${path}?${query}`;
  console.log(fullUrl);
  return {
    props: {},
  };
}