- dynamic products test

app/api/products/getAll/route.ts

@@ -0,0 +1,19 @@
+import { prisma } from '@/db/client'
+import { NextResponse } from 'next/server'
+
+import type { NextRequest } from 'next/server'
+
+
+export async function GET(request: NextRequest) {
+    try{
+
+        const products = await prisma.product.findMany()
+        // URL to redirect to after sign in process completes
+        return NextResponse.json({data:products})
+    }catch(err){
+        return NextResponse.error()
+    }finally{
+        prisma.$disconnect()
+    }
+
+}

app/api/products/getSingle/route.ts

@@ -0,0 +1,26 @@
+import { prisma } from '@/db/client'
+import { NextResponse } from 'next/server'
+
+import type { NextRequest } from 'next/server'
+
+
+export async function POST(request: NextRequest) {
+    const {id} = await request.json()
+    console.log(id,'TARGET ID')
+    try{
+
+        const product = await prisma.product.findUnique({
+            where: {
+              id:Number(id)
+            }
+          })
+          console.log(product, 'TARGET PRODUCT')
+        // URL to redirect to after sign in process completes
+        return NextResponse.json({data:product})
+    }catch(err){
+        return NextResponse.error()
+    }finally{
+        prisma.$disconnect()
+    }
+
+}

app/page.tsx

@@ -5,14 +5,21 @@ import InfoSection from '@/containers/home-page/info-section'
 import PopularProducts from '@/containers/home-page/popular-products-section'
 import ServicesSection from '@/containers/home-page/services-section'
 import TestimonialSection from '@/containers/home-page/testimonial-section'
-import Image from 'next/image'
+import { getAll } from '@/libs/endpoints'
+import axios from 'axios'
 
-export default function Home() {
+const getItems = async() => {
+  const data = await axios(getAll)
+  return data.data
+}
+
+export default async function Home() {
+  const items = await getItems()
   return (
     <main>
       <HeroSection />
       <ServicesSection />
-      <PopularProducts />
+      <PopularProducts products={items.data} />
       <InfoSection />
       <TestimonialSection />
       <ArticlesSection />

app/product/[id]/page.tsx

@@ -2,39 +2,41 @@ import React, { FC } from 'react'
 import type { Metadata, ResolvingMetadata } from 'next'
 import ItemSection from '@/containers/product-page/item-section'
 import RelatedSection from '@/containers/product-page/related-section'
+import axios from 'axios'
 interface ProductProps {
     params: { id: string }
   searchParams: { [key: string]: string | string[] | undefined }
 }
-/*export async function generateMetadata(
+export async function generateMetadata(
   { params, searchParams }: ProductProps,
     parent?: ResolvingMetadata
   ): Promise<Metadata> {
     // read route params
     const id = params.id
 
     // fetch data
-   const product = new Promise<string>((resolve) => {
-        return setTimeout(() => {
-            resolve('Test')
-            
-        }, 1000);
-    })
-   
+   const product = await axios.post(process.env.NEXT_PUBLIC_SITE_URL ?? process?.env?.NEXT_PUBLIC_VERCEL_URL ?? 'http://localhost:3000/'+'api/products/getSingle',{id:id})
     // optionally access and extend (rather than replace) parent metadata
-    const previousImages = (await parent).openGraph?.images || []
+    //const previousImages = (await parent).openGraph?.images || []
     return {
       //title: await product,
-      title:id,
-      openGraph: {
-       // images: ['/some-specific-page-image.jpg', ...previousImages],
-      },
+      title:product?.data?.data?.name,
+      openGraph:{
+        images:[product?.data?.data?.imgUrl]
+      }
+
     }
-  }*/
-const Product: FC<ProductProps> = ({  }) => {
+  }
+
+  const getSingleProduct = async(id:string) => {
+   const product = await axios.post(process.env.NEXT_PUBLIC_SITE_URL ?? process?.env?.NEXT_PUBLIC_VERCEL_URL ?? 'http://localhost:3000/'+'api/products/getSingle',{id})
+   return product.data
+  }
+const Product: FC<ProductProps> = async({ params }) => {
+  const product = await getSingleProduct(params.id)
   return (
     <main>
-      <ItemSection />
+      <ItemSection item={product.data}/>
       <RelatedSection />
     </main>
   )

app/products/page.tsx

@@ -2,19 +2,25 @@ import ProductsHero from '@/containers/products-page/products-hero';
 import PromiseItems from '@/containers/products-page/items-section';
 import ProductsSearch from '@/containers/products-page/search-section';
 import React, { FC } from 'react'
+import axios from 'axios';
+import { getAll } from '@/libs/endpoints';
 
 interface ProductsProps {
   searchParams: { [key: string]: string | string[] | undefined }
 }
-
+const getItems = async() => {
+    const data = await axios(getAll)
+    return data.data
+}
 const Products: FC<ProductsProps> = async({ searchParams }) => {
   const page = typeof searchParams.page === 'string' ? Number(searchParams.page) : 1
-  console.log(page)
+  const items = await getItems()
+
   return (
     <main>
         <ProductsHero />
         <ProductsSearch />
-        <PromiseItems />
+        <PromiseItems products={items.data}/>
     </main>
   )
 }

components/Cards/ProductCard/index.tsx

@@ -1,24 +1,27 @@
+import { TProduct } from "@/types/Product";
 import Image from "next/image";
 import Link from "next/link";
 import React, { FC } from "react";
 
-interface ProductCardProps {}
+interface ProductCardProps {
+  item:TProduct
+}
 
-const ProductCard: FC<ProductCardProps> = ({}) => {
+const ProductCard: FC<ProductCardProps> = ({item}) => {
   return (
     <div className="flex flex-col md:gap-7 gap-5 w-max">
-      <Link href={'/product/1'} className="">
-        <Image src={"/product.png"} width={394} height={360} className="w-[156px] h-[130px] sm:w-[220px] sm:h-[194px] md:w-[394px] md:h-[360px]" alt="Product IMG" />
+      <Link href={`/product/${item.id}`} className="">
+        <Image src={item.imgUrl} width={394} height={360} className="w-[156px] h-[130px] sm:w-[220px] sm:h-[194px] md:w-[394px] md:h-[360px]" alt="Product IMG" />
       </Link>
       <div className="flex flex-col md:gap-4 gap-3">
-        <h2 className="text-textColor font-bold text-xs md:text-lg">Lamp</h2>
+        <h2 className="text-textColor font-bold text-xs md:text-lg">{item.category}</h2>
         <div>
-          <Link href={'/product/1'} className="text-black md:text-2xl text-xs font-bold">Bardono Smart Lamp</Link>
+          <Link href={`/product/${item.id}`} className="text-black md:text-2xl text-xs font-bold">{item.name}</Link>
           <p className="text-textColor text-xs md:text-lg w-[156px] md:w-full">
-            Easy to use with bluetooth connection
+            {item.title}
           </p>
         </div>
-        <span className="text-black md:text-xl text-lg font-bold">$62.23</span>
+        <span className="text-black md:text-xl text-lg font-bold">${item.price}</span>
       </div>
     </div>
   );

containers/home-page/popular-products-section/index.tsx

@@ -1,10 +1,13 @@
 import ProductCard from "@/components/Cards/ProductCard";
 import React, { FC } from "react";
 import PopularProductsSlide from "./popular-products-slide";
+import { TProduct } from "@/types/Product";
 
-interface PopularProductsProps {}
+interface PopularProductsProps {
+  products: TProduct[]
+}
 
-const PopularProducts: FC<PopularProductsProps> = ({}) => {
+const PopularProducts: FC<PopularProductsProps> = ({products}) => {
   return (
     <section className="w-full flex flex-col items-center justify-center md:gap-14">
       <div className="w-full max-w-screen-xl flex flex-col py-10 md:py-20 items-center mx-5 md:mx-20 gap-4 md:gap-8 text-center">
@@ -22,7 +25,7 @@ const PopularProducts: FC<PopularProductsProps> = ({}) => {
         </p>
       </div>
       <div className="w-full py-6">
-        <PopularProductsSlide />
+        <PopularProductsSlide items={products}/>
       </div>
     </section>
   );

containers/home-page/popular-products-section/popular-products-slide/index.tsx

@@ -8,10 +8,13 @@ import "swiper/css/navigation";
 import React, { FC, useRef } from "react";
 import ProductCard from "@/components/Cards/ProductCard";
 import { SlideArrow } from "@/components/Icons/SlideArrow";
+import { TProduct } from "@/types/Product";
 
-interface PopularProductsSlideProps {}
+interface PopularProductsSlideProps {
+  items:TProduct[]
+}
 
-const PopularProductsSlide: FC<PopularProductsSlideProps> = ({}) => {
+const PopularProductsSlide: FC<PopularProductsSlideProps> = ({items}) => {
   const swiperRef = useRef<any>(null);
   return (
     <Swiper
@@ -23,33 +26,17 @@ const PopularProductsSlide: FC<PopularProductsSlideProps> = ({}) => {
       centeredSlides
       onSwiper={(swiper) => (swiperRef.current = swiper)}
     >
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
+      {items.map((el,_i) => (
+      <SwiperSlide key={_i} className={styles.popularProductsSlide__slide}>
+        <ProductCard item={el}/>
       </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
-      </SwiperSlide>
-      <SwiperSlide className={styles.popularProductsSlide__slide}>
-        <ProductCard />
+      ))}
+      {items.map((el,_i) => (
+      <SwiperSlide key={_i} className={styles.popularProductsSlide__slide}>
+        <ProductCard item={el}/>
       </SwiperSlide>
+      ))}
+
       <button
         onClick={() => swiperRef.current.slideNext()}
         className="text-black  absolute bottom-[50%] top-[50%] z-10 left-12 w-[52px] h-[52px] rounded-full bg-[#15141199] backdrop-blur items-center justify-center hidden md:flex"

containers/product-page/item-section/index.tsx

@@ -1,12 +1,13 @@
 import PrimaryButton from '@/components/Buttons/PrimaryButton';
+import { TProduct } from '@/types/Product';
 import Image from 'next/image';
 import React, { FC } from 'react'
 
 interface ItemSectionProps {
-
+  item:TProduct
 }
 
-const ItemSection: FC<ItemSectionProps> = ({  }) => {
+const ItemSection: FC<ItemSectionProps> = ({ item }) => {
   const colors = [
     {
       id:1,
@@ -25,22 +26,22 @@ const ItemSection: FC<ItemSectionProps> = ({  }) => {
     <section className='w-full flex justify-center'>
       <div className='flex flex-col lg:flex-row items-center justify-between  gap-2 md:gap-5 w-full max-w-screen-xl mx-5 md:mx-20   py-10 md:pt-28'>
         <div className='relative'>
-          <Image src={'/product.png'} width={600} height={600} alt='Lalasia Product' className='min-w-full h-auto  lg:w-[600px]' style={{objectFit:'contain'}}/>
+          <Image src={item.imgUrl} width={600} height={600} alt='Lalasia Product' className='min-w-full h-auto  lg:w-[600px]' style={{objectFit:'contain'}}/>
         </div>
         <div className='flex flex-col justify-center gap-[30px] w-full md:w-[590px]'>
           <div className='flex flex-col gap-2'>
-            <h1 className='xl:text-4xl text-2xl text-black font-bold'>White Aesthetic Chair</h1>
-            <span className='text-textColor text-sm md:text-lg'>Combination of wood and wool</span>
+            <h1 className='xl:text-4xl text-2xl text-black font-bold'>{item.name}</h1>
+            <span className='text-textColor text-sm md:text-lg'>{item.title}</span>
           </div>
           <div className='flex flex-col gap-5'>
             <h3 className='text-black text-sm md:text-lg font-semibold'>Color</h3>
             <div className='flex'>
               {colors.map((el,_i) => <div key={_i} style={{background:el.value}} className={`h-[50px] w-[50px]`}/>)}
             </div>
-            <p className='text-textColor text-sm xl:text-lg '>Faucibus facilisi morbi pharetra quis sed. Vitae suspendisse facilisis facilisis ligula felis et a parturient aenean. Ac maecenas ultricies felis risus scelerisque duis posuere...</p>
+            <p className='text-textColor text-sm xl:text-lg '>{item.description}</p>
           </div>
           <div className=''>
-            <span className='xl:text-4xl text-2xl text-black font-bold'>$99.98</span>
+            <span className='xl:text-4xl text-2xl text-black font-bold'>${item.price}</span>
           </div>
           <div className='flex flex-col lg:flex-row gap-2 lg:gap-5'>  
             <PrimaryButton text='Buy Now' className='w-full border-2 border-transparent font-semibold flex items-center justify-center lg:w-max'/>

containers/product-page/related-section/index.tsx

@@ -8,12 +8,12 @@ interface RelatedSectionProps {
 const RelatedSection: FC<RelatedSectionProps> = ({  }) => {
   return (
     <section className='w-full flex justify-center'>
-        <div className='flex flex-col justify-between  gap-7 w-full max-w-screen-xl mx-5 md:mx-20 py-10'>
+       {/* <div className='flex flex-col justify-between  gap-7 w-full max-w-screen-xl mx-5 md:mx-20 py-10'>
         <h1 className='text-black text-3xl font-bold'>Related Items</h1>
         <div className='flex w-full flex-wrap gap-6 justify-between'>
             {Array(3).fill(0).map((el, _i) => <ProductCard key={_i}/>)}
         </div>
-        </div>
+  </div>*/}
     </section>
   )
 }

containers/products-page/items-section/index.tsx

@@ -3,13 +3,15 @@ import ProductCard from '@/components/Cards/ProductCard';
 import { SlideArrow } from '@/components/Icons/SlideArrow';
 import { Sort } from '@/components/Icons/Sort';
 import Pagination from '@/components/Pagination';
+import { TProduct } from '@/types/Product';
 import React, { FC, useState } from 'react'
 
 interface PromiseItemsProps {
+  products:TProduct[]
 }
 
 
-const PromiseItems: FC<PromiseItemsProps> = ({ }) => {
+const PromiseItems: FC<PromiseItemsProps> = ({ products }) => {
   return (
     <section className='w-full flex justify-center'>
       <div className='flex flex-col justify-between  gap-2 md:gap-5 w-full max-w-screen-xl mx-5 md:mx-20   md:px-0'>
@@ -24,7 +26,7 @@ const PromiseItems: FC<PromiseItemsProps> = ({ }) => {
           </div>
         </div>
         <div id='items' className='w-full flex flex-wrap gap-[30px] justify-between'>
-          {Array(9).fill(0).map((el,_i) => <ProductCard key={_i}/>)}
+          {products.map((el,_i) => <ProductCard key={_i} item={el}/>)}
         </div>
         <div className='w-full flex justify-center'>
         <Pagination itemPerView={9} totalItems={50} currentPage={1} />

libs/endpoints.ts

@@ -0,0 +1,4 @@
+
+
+
+export const getAll = process.env.NEXT_PUBLIC_SITE_URL ?? process?.env?.NEXT_PUBLIC_VERCEL_URL ?? 'http://localhost:3000/'+'api/products/getAll'

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
     experimental:{
         serverActions:true
+    },
+    images:{
+        domains:['hcjopueyhqceiorxnkqq.supabase.co']
     }
 }