0

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?

Dastagir Shaikh
  • 35
  • 6
  • @Yilmaz i tried getserversideprops buts shows no valid entry point in nextjs same as staticprops and static paths. i tried moving it inside main componen, outside component but same. thanks for replying – Dastagir Shaikh Apr 16 '23 at 21:01
  • in app directory, there is no serverside functions. serverside functions are part of the pages that run on the server before page is sent to the client. in app directory, we are completely on the server – Yilmaz Apr 16 '23 at 21:09
  • in next-13 app directory dynamic routes, `params` are already passed as a prop. `props.params`. the answer that I posted has the example – Yilmaz Apr 16 '23 at 21:10

0 Answers0