Hi, I made this directory /app/product/[id], I wanted to grab the id from the URL to use it my SQL query but I couldn't figure out how to do that on the server side.
I tried this approach:

import { headers } from "next/headers";
import { getProductById } from "@/lib/actions";

export default async function Page() {
  function getId() {
    const headersList = headers();
    const pathname = headersList.get("referer");
    const index = pathname?.indexOf("/product");
    const id = pathname?.slice((index as any) + 9);
    return id;
  }
  const id = getId();
  const fetchedProduct = await getProductById(id as string);
  console.log(fetchedProduct);

  return (
    <div>
      {fetchedProduct?.map((item) => (
        <h1>{item?.title}</h1>
      ))}
    </div>
  );
}

but the only time it works is when I save the file while being on that directory(/product/[id]).
When I try to access the product from the root or just refresh the page on /product/[id], it doesn't catch the correct URL(this is the pathname it sends http://localhost:3000, not the expected http://localhost:3000/product/[id])