How do i route to single product page after user selection

i have this main products page which fetch all the products from a local json file

   interface productItem {
      id: number;
      name: string;
      image: string;
      price?: string;
      prices: {
        half: string;
        full: string;
      };
      categories: string;
    }

  const [products, setProducts] = useState("Cakes");
  const [sltproducts, setSltProducts] = useState<productItem[]>([]);

  useEffect(() => {
    const fetchProduct = () => {
      fetch("items.json")
        .then((response) => response.json())
        .then((productdata) => {
          const productcakes = productdata.Cakes.map((item: productItem) => ({
            ...item,
            categories: "Cake",
          }));
           const productmemorella = productdata.Memorella.map((item: productItem) => ({
             ...item,
             categories: "Memorella",
           }));
           const producticecream = productdata.Ice_Cream.map(
             (item: productItem) => ({
               ...item,
               categories: "Ice Cream",
             })
          );
          const productpastries = productdata.Pastries.map(
            (item: productItem) => ({
              ...item,
              categories: "Pastries",
            })
          );
          setSltProducts([...productcakes,...productmemorella, ...producticecream, ...productpastries]);
        })
        .catch((error) => {
          console.error("Error fetching items:", error);
        });
    }
    fetchProduct();
  }, [])

This is my card component on same page

{sltproducts
                .filter((product) => product.categories === "Cake")
                .map((prdct) => (
                  <Link
                    href={`/Product/${prdct.categories}/${prdct.id}`}
                    key={prdct.id}
                    className="product-page-selected-cakes-card"
                  >
                    <img src={prdct.image} alt="" />
                    <div className="product-price">
                      <h5>{prdct.name}</h5>
                      <hr />
                      <p>₹{prdct.prices.half}</p>
                    </div>
                  </Link>

This is my single product folder which i have give [] for dynamic route

How do i fetch a single product that was selected by the user to this single product page. Note that “product.categories” is because i have multiple section i.e cakes, pastries etc