updated env variables, need to create server component to fetch data

api/src/api/product/content-types/product/schema.json

@@ -18,7 +18,7 @@
     "desc": {
       "type": "text"
     },
-    "Image": {
+    "image": {
       "type": "media",
       "multiple": false,
       "required": false,
@@ -29,7 +29,7 @@
         "audios"
       ]
     },
-    "Image2": {
+    "image2": {
       "type": "media",
       "multiple": false,
       "required": false,

api/types/generated/contentTypes.d.ts

@@ -486,8 +486,8 @@ export interface ApiProductProduct extends Struct.CollectionTypeSchema {
     createdBy: Schema.Attribute.Relation<'oneToOne', 'admin::user'> &
       Schema.Attribute.Private;
     desc: Schema.Attribute.Text;
-    Image: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
-    Image2: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
+    image: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
+    image2: Schema.Attribute.Media<'images' | 'files' | 'videos' | 'audios'>;
     isNew: Schema.Attribute.Boolean & Schema.Attribute.DefaultTo<false>;
     locale: Schema.Attribute.String & Schema.Attribute.Private;
     localizations: Schema.Attribute.Relation<

frontend/next.config.mjs

@@ -6,17 +6,11 @@ const nextConfig = {
 				source: '/backend/:path*',
 				destination: `http://192.168.50.107:5580/:path*`,
 			},
-		]
-	},
-	images: {
-		remotePatterns: [
 			{
-				protocol: "https",
-				hostname: "ih1.redbubble.net",
-				port: "",
-				pathname: "/**",
-			},
-		],
+				source: '/strapi/:path*',
+				destination: `http://192.168.50.107:1337/:path*`,
+			}
+		]
 	},
 };
 

frontend/src/app/products/page.tsx

@@ -11,16 +11,21 @@ const Products = () => {
   const [maxPrice, setMaxPrice] = useState(100);
   const [sort, setSort] = useState("asc");
 
-  async function getData () {
-    let response = await fetch(process.env.REACT_APP_API_URL + "/products", {
+  async function GetData () {
+    // const response = await fetch("/strapi/products?=populate=*", {
+    const response = await fetch(process.env.NEXT_PUBLIC_API_URL +"/products?populate=*", {
       method: "GET",
       headers: {
-        Authorization: "bearer" + process.env.REACT_APP_API_TOKEN,
-      },
+        Authorization: "Bearer " + process.env.NEXT_PUBLIC_API_TOKEN
+      }
     });
-    let data = await response.json();
-    console.log(data);
+    const data = await response.json();
+    // console.log(data.data);
+    // console.log(data.data[0].image.url);
+    return data.data;
   };
+  const products = GetData();
+  console.log(products);
 
   return (
     <div className="products">
@@ -75,7 +80,8 @@ const Products = () => {
           alt="Profile picture"
         /> */}
       </div>
-      <MenuCard Menu={Product} />
+      <MenuCard Menu={products} />
+      {/* <button onClick={GetData} className="bg-blue-500 text-white px-4 py-2 rounded-md">Get Data</button> */}
     </div>
   );
 };

frontend/src/components/ui/MenuCard/MenuCard.tsx

@@ -20,8 +20,10 @@ const Popp = Poppins({ weight: "400", subsets: ["latin"] });
 // });
 // const inter = Inter({ subsets: ["latin"] });
 
+
 const MenuCard = ({ Menu }: any) => {
   const router = useRouter();
+
   return (
     <div className="grid qhd:grid-cols-5 desktop:grid-cols-4 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6 ">
       {Menu.map((menu_item: any) => {
@@ -33,7 +35,7 @@ const MenuCard = ({ Menu }: any) => {
             <div className="w-full h-[75%]">
               <div className="h-full relative w-full">
                 <Image
-                  src={`/${menu_item.photo}`}
+                  src={`/${process.env.NEXT_PUBLIC_UPLOAD_URL+menu_item.image.url}`}
                   alt="product photo"
                   fill
                   style={{ objectFit: "cover", objectPosition: "center" }}