diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts
index 4ab9ed2d9..592086c13 100644
--- a/framework/vendure/api/operations/get-product.ts
+++ b/framework/vendure/api/operations/get-product.ts
@@ -2,7 +2,7 @@ import { Product } from '@commerce/types/product'
 import { OperationContext } from '@commerce/api/operations'
 import { Provider, VendureConfig } from '../'
 import { GetProductQuery } from '../../schema'
-import { getProductQuery } from '../../utils/queries/get-product-query'
+import { getProductQuery, getProductDetailQuery } from '../../utils/queries/get-product-query'
 
 export default function getProductOperation({
   commerce,
diff --git a/package.json b/package.json
index 84a77cf71..8474be667 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
+    "dns": "^0.2.2",
     "email-validator": "^2.0.4",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
@@ -35,6 +36,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
+    "net": "^1.0.2",
     "next": "^11.0.0",
     "next-seo": "^4.26.0",
     "next-themes": "^0.0.14",
diff --git a/pages/test.tsx b/pages/test.tsx
index 6244c3dd6..debfe2398 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,17 +1,17 @@
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
-
+import { ProductCard } from '@commerce/types/product';
 interface Props {
-  products: any
+  productDetail: ProductCard[],
 }
-export default function Home({ products }: Props) {
+export default function Home({ productDetail }: Props) {
   return (
     <>
       <p>
-        TOTAL: {products?.length}
+        TOTAL: {productDetail}
       </p>
-      {JSON.stringify(products[0])}
+      {/* {JSON.stringify(productDetail)} */}
     </>
   )
 }
@@ -23,10 +23,11 @@ export async function getServerSideProps({
   locales,
 }: GetStaticPropsContext) {
   const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
+  
+  const productsPromise = commerce.getProduct({
     // const productsPromise = commerce.getAllFacets({
     variables: {
-      first: 70,
+      slug: "hand-trowel"
       //  filter: {
       //   name: {
       //     contains: 'ca'
@@ -34,16 +35,15 @@ export async function getServerSideProps({
       // }
     },
     config,
-    preview,
+    // preview,
     // Saleor provider only
     ...({ featured: true } as any),
   })
 
-  const { products } = await productsPromise
-
-
+  const { product } = await productsPromise
+  const productDetail = JSON.stringify(product)
   return {
-    props: { products },
+    props: { productDetail },
   }
 }
 
diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
index d1047bd3a..2578a865f 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
@@ -2,13 +2,19 @@ import React from 'react'
 import ProductImgs from './components/ProductImgs/ProductImgs'
 import ProductInfo from './components/ProductInfo/ProductInfo'
 import s from './ProductInfoDetail.module.scss'
+import { GetStaticPropsContext, GetStaticPathsContext, InferGetStaticPropsType } from 'next'
+import commerce from '@lib/api/commerce'
+import { PromiseWithKey } from 'src/utils/types.utils'
+import { getAllPromies } from 'src/utils/funtion.utils'
+import { ProductCard } from '@commerce/types/product';
+import { useRouter } from 'next/router'
 
 interface Props {
-    className?: string
-    children?: any
+    productDetail: ProductCard[],
 }
 
-const ProductInfoDetail = ({ }: Props) => {
+const ProductInfoDetail = ({ product }: InferGetStaticPropsType<typeof getStaticProps>) => {
+    console.log(product)
     return (
         <section className={s.productInfoDetail}>
             <ProductImgs/>
@@ -17,4 +23,61 @@ const ProductInfoDetail = ({ }: Props) => {
     )
 }
 
+export async function getStaticProps({
+    params,
+    locale,
+    locales,
+    preview,
+  }: GetStaticPropsContext<{ slug: string }>) {
+    const config = { locale, locales }
+    const pagesPromise = commerce.getAllPages({ config, preview })
+    const siteInfoPromise = commerce.getSiteInfo({ config, preview })
+    const productPromise = commerce.getProduct({
+      variables: { slug: params!.slug },
+      config,
+      preview,
+    })
+  
+    // const allProductsPromise = commerce.getAllProducts({
+    //   variables: { first: 4 },
+    //   config,
+    //   preview,
+    // })
+    const { pages } = await pagesPromise
+    const { categories } = await siteInfoPromise
+    const { product } = await productPromise
+    // const { products: relatedProducts } = await allProductsPromise
+  
+    if (!product) {
+      throw new Error(`Product with slug '${params!.slug}' not found`)
+    }
+  
+    return {
+      props: {
+        pages,
+        product,
+        // relatedProducts,
+        categories,
+      },
+      revalidate: 200,
+    }
+    }
+  
+//   export async function getStaticPaths({ locales }: GetStaticPathsContext) {
+//     const { products } = await commerce.getAllProductPaths()
+  
+//     return {
+//       paths: locales
+//         ? locales.reduce<string[]>((arr, locale) => {
+//             // Add a product path for every locale
+//             products.forEach((product: any) => {
+//               arr.push(`/${locale}/product${product.path}`)
+//             })
+//             return arr
+//           }, [])
+//         : products.map((product: any) => `/product${product.path}`),
+//       fallback: 'blocking',
+//     }
+//   }
+
 export default ProductInfoDetail