How do i get data in dynamic routes nextjs 13

the route is simple /Product/Category/id

this is the [id].tsx component

"use client";
import SinglePSlider from "../../../Component/SinglePSlider";
import Navbar from "../../../Navbar/page";
import "../../../globals.css";
import {useEffect, useState} from "react"
import { useSearchParams } from "next/navigation";

interface productItem {
  id?: number;
  name: string;
  image1: string;
  image2: string;
  image3: string;
  image4: string;
  description: string;
  price?: string;
  prices: {
    half: string;
    full: string;
  };
  categories: string;
}

const Item = () => {
  const searchParams = useSearchParams();

  const [product, setProduct] = useState<productItem | null>(null);
  const id = searchParams.get("id");
   useEffect(() => {
     const fetchData = async () => {
       const res = await fetch(`/items.json`);
       const data = await res.json();
       const productItem = data.Cakes.find(
         (item: productItem) => item.id === Number(id)
       );
       setProduct(productItem);
     };

     if (id) {
       fetchData();
     }
   }, [id]);
  return (
    <>
      <Navbar />
      <div className="singleproduct-main">
        <div className="singleproduct-parallex">
          <SinglePSlider
            img1={product?.image1 || ""}
            img2={product?.image2 || ""}
            img3={product?.image3 || ""}
            img4={product?.image4 || ""}
          />
        </div>
        <div className="singleproduct">
          <h4 className="singleproduct-title">{product?.name}</h4>
          <div className="singleproduct-franchise">
            <select>
              <option disabled selected value="">
                Select Franchise
              </option>
              <option value=""></option>
            </select>
          </div>
          <p className="singleproduct-para">{product?.description}</p>
        </div>
      </div>
    </>
  );
};

export default Item;

i tried this but didn’t work.The actual working should be to get the id and find it in the json file and get its data. i used getstaticprops, getstaticpaths but didnt worked out. i console logged the id and it shows null is it because it is string first and when comparing the id its number? . what can be the problem?