Data Fetching and showing single products dynamic route

app-api-categories-page.js

import fs from "fs"
import path from "path"

export function getCategories() {
    const filePath = path.join(process.cwd() , "categories.json");
    const fileContent = fs.readFileSync(filePath , 'utf8');
    const categories = JSON.parse(fileContent);
    return categories;
}

app-api-products-page.js

import fs from "fs";
import path from "path";

export function getProduct(id) {
  const filePath = path.join(process.cwd(), "products.json");
  const fileContent = fs.readFileSync(filePath, "utf8");
  const products = JSON.parse(fileContent);

  if (id) {
    return products.find(product => product.id === parseInt(id));
  }

  return products;
}

app-store-page.js

import React from "react";
import { getCategories } from "../api/categories/route";
import { getProduct } from "../api/products/route";
import CategoryListing from "@/components/CategoryListing";
import ProductListing from "@/components/ProductListing";

const Page = async () => {
  const categories = await getCategories();
  // console.log(categories)

  const products = await getProduct();
  // console.log(products)

  const allTelevision = products.filter((product) => {
    return product.category_id == 1;
  });

  const allMobiles = products.filter((product) => {
    return product.category_id == 2;
  });

  const allClothes = products.filter((product) => {
    return product.category_id == 3;
  });

  const allFurniture = products.filter((product) => {
    return product.category_id == 4;
  });
  return (

      <CategoryListing data={categories} title="Category of Products " />

      <ProductListing data={allTelevision} title="Televisions" />

      <ProductListing data={allMobiles} title="Mobiles" />

      <ProductListing data={allClothes} title="Clothes" />

      <ProductListing data={allFurniture} title="Furniture" />
      <ProductListing data={products} title="All Products" />

  );
};
export default Page;

components-category

import Image from "next/image";
import Link from "next/link";
import React from "react";
import PropTypes from "prop-types";

const CategoryListing = ({ data, title }) => {
  // Check if data.categories exists and is an array
  const categories = Array.isArray(data.categories) ? data.categories : [];
  // console.log(categories)

  return (
    
        <h1 >{title}</h1>

        {categories.map((category) => (
          <Link
            href="#"
            className=" w-auto p-3 rounded-md shadow-lg "
            key={category.id}
          >
            <div className=" w-[20rem] h-[20rem]  relative  ">
              <Image
                src={category.image}
                fill
                alt={`${category.title} image`}
                className="p-4 rounded-md"
              />
            </div>
            <h1 className="flex justify-center items-center  pt-4 pb-4 text-3xl  font-bold ">
              {category.title}
            </h1>
          </Link>
        ))}
    
  );
};

CategoryListing.displayName = "CategoryListing";
export default CategoryListing;

components-productDetailspage

import Image from "next/image";
import React from "react";

const ProductDetailsPage = ({ data }) => {
  if (!data) return null; // Handle case where data is not yet available

  return (
   
          <h1>{data.brand}</h1>
        </div>
        <div className="w-auto h-[40rem] flex justify-center items-center relative">
          <Image
            src={data.images[0]}
            fill
            alt={data.title}
            className="p-10 rounded-sm"
          />
        </div>
        <div className="flex flex-col gap-3">
          <h1 className="flex justify-center items-center pt-4 pb-4 text-3xl font-bold">
            {data.title}
          </h1>
          <p>{data.short_description}</p>
          <h3 className="text-3xl">
            Current Price <span>{data.currentPrice}</span>
          </h3>
          <h3 className="text-3xl">
            Starting Price <span>{data.initialPrice}</span>
          </h3>
          <p>{data.ratings} Star</p>
          <p>{data.detail_description}</p>
        </div>
      </div>
    </section>
  );
};

ProductDetailsPage.displayName = "ProductDetailsPage";

export default ProductDetailsPage;

components-productsListing

import Image from "next/image";
import Link from "next/link";
import React from "react";

const ProductListing = ({ data, title, id }) => {
  if (!data) return null; // Handle case where data is not yet available

  return (
        <h1 className="text-3xl ml-4 text-white font-semibold">{title}</h1>
          {data.map((product) => {
            return (
              <Link
              href={`products/${product.id}`}
                className=" w-[30rem] p-3 rounded-md shadow-lg "
                key={product.id}
              >
              
                  <h1>{product.brand}</h1>
         
                <div className=" w-auto  h-[40rem] flex justify-center items-center  relative  ">
                  <Image
                    src={product.images[0]}
                    fill
                    alt={product.title}
                    className="p-10 rounded-sm"
                  />
                </div>
                <div className="flex flex-col gap-3 ">
                  <h1 className="flex justify-center items-center  pt-4 pb-4 text-3xl  font-bold ">
                    {product.title}
                  </h1>
                  <p>{product.short_description}</p>

                  <h3 className="text-3xl">
                    Current Price <span>{product.currentPrice}</span>
                  </h3>
                  <h3 className="text-3xl">
                    Starting Price <span>{product.initialPrice}</span>
                  </h3>
                  <p>{product.ratings} Star </p>
                  <p>{product.detail_description}</p>
                </div>
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
};

ProductListing.displayName = "ProductListing";

export default ProductListing;

Data Fetching and showing single products dynamic route Category.json

{
  "categories": [
    {
      "id": 1,
      "title": "Television",
      "description": "A wide range of high-quality televisions.",
      "image": "/json/categories/television.jpg",
      "key": "CATEGORY_TELEVISION"
    },
    {
      "id": 2,
      "title": "Mobile",
      "description": "Latest smartphones and accessories.",
      "image": "/json/categories/mobiles.jpg",
      "key": "CATEGORY_MOBILE"
    },
      ]
}

products-[id]-page.js

// app/products/[id]/page.js
import { getProduct } from '@/app/api/products/route';
import ProductDetailsPage from '@/components/ProductDetailsPage';
import React from 'react';

export async function generateStaticParams() {
  const products = getProduct();
  return products.map((product) => ({ id: product.id.toString() }));
}

const ProductPage = ({ params }) => {
  const product = getProduct(params.id);

  return (
    <div>
      <ProductDetailsPage data={product} />
    </div>
  );
};

export default ProductPage;

products.json

[
  {
    "id": 1,
    "category_id": 1,
    "title": "Samsung 55 QLED",
    "slug": "samsung-55-qled",
    "short_description": "Experience the vibrant colors and stunning clarity with Samsung's 55-inch QLED TV.",
    "detail_description": "Samsung's 55-inch QLED TV offers an immersive viewing experience with Quantum Dot technology that delivers over a billion shades of color. The Ultra HD resolution ensures crystal-clear images, while the smart features provide easy access to your favorite streaming services.",
    "images": [
      "/json/product/samsungOled-1.jpg",
      "/json/product/samsungOled-2.jpg"
    ],
    "isFeatured": true,
    "isTrending": true,
    "brand": "Samsung",
    "keywords": ["Samsung", "QLED", "55-inch", "Smart TV", "4K"],
    "initialPrice": 1200.0,
    "currentPrice": 999.99,
    "ratings": 4.8
  },
  {
    "id": 2,
    "category_id": 1,
    "title": "LG 65 OLED",
    "slug": "lg-65-oled",
    "short_description": "Dive into the depth of black and vibrant colors with LG's 65-inch OLED TV.",
    "detail_description": "LG's 65-inch OLED TV features self-lighting pixels that can turn on and off individually to deliver perfect black, over a billion rich colors, and infinite contrast. With AI ThinQ, your TV becomes a central hub of the smart home, and the webOS platform makes streaming content easier than ever.",
    "images": ["/json/product/Lg-1.jpg", "/json/product/Lg-2.jpg"],
    "isFeatured": true,
    "isTrending": false,
    "brand": "LG",
    "keywords": ["LG", "OLED", "65-inch", "Smart TV", "4K"],
    "initialPrice": 2500.0,
    "currentPrice": 2199.99,
    "ratings": 4.9
  },
  ]