nextjs and other packages updated to the latest version to ensure security best practices

Author: Kuzma02

app/product/[productSlug]/page.tsx

@@ -19,16 +19,21 @@ interface ImageItem {
   image: string;
 }
 
+interface SingleProductPageProps {
+  params: Promise<{  productSlug: string, id: string }>;
+}
+
 const SingleProductPage = async ({ params }: SingleProductPageProps) => {
+  const paramsAwaited = await params;
   // sending API request for a single product with a given product slug
   const data = await fetch(
-    `http://localhost:3001/api/slugs/${params.productSlug}`
+    `http://localhost:3001/api/slugs/${paramsAwaited?.productSlug}`
   );
   const product = await data.json();
 
   // sending API request for more than 1 product image if it exists
   const imagesData = await fetch(
-    `http://localhost:3001/api/images/${product.id}`
+    `http://localhost:3001/api/images/${paramsAwaited?.id}`
   );
   const images = await imagesData.json();
 
@@ -68,7 +73,7 @@ const SingleProductPage = async ({ params }: SingleProductPageProps) => {
             <StockAvailabillity stock={94} inStock={product?.inStock} />
             <SingleProductDynamicFields product={product} />
             <div className="flex flex-col gap-y-2 max-[500px]:items-center">
-              <AddToWishlistBtn product={product} slug={params.productSlug} />
+              <AddToWishlistBtn product={product} slug={paramsAwaited.productSlug} />
               <p className="text-lg">
                 SKU: <span className="ml-1">abccd-18</span>
               </p>

app/shop/[[...slug]]/page.tsx

@@ -21,7 +21,10 @@ const improveCategoryText = (text: string): string => {
   }
 };
 
-const ShopPage = (slug: any) => {
+const ShopPage = async ({ params, searchParams }: { params: Promise<{ slug?: string[] }>, searchParams: Promise<{ [key: string]: string | string[] | undefined }> }) => {
+  // Await both params and searchParams
+  const awaitedParams = await params;
+  const awaitedSearchParams = await searchParams;
 
   return (
     <div className="text-black bg-white">
@@ -32,15 +35,15 @@ const ShopPage = (slug: any) => {
           <div>
             <div className="flex justify-between items-center max-lg:flex-col max-lg:gap-y-5">
               <h2 className="text-2xl font-bold max-sm:text-xl max-[400px]:text-lg uppercase">
-                {slug?.params?.slug && slug?.params?.slug[0]?.length > 0
-                  ? improveCategoryText(slug?.params?.slug[0])
+                {awaitedParams?.slug && awaitedParams?.slug[0]?.length > 0
+                  ? improveCategoryText(awaitedParams?.slug[0])
                   : "All products"}
               </h2>
 
               <SortBy />
             </div>
             <div className="divider"></div>
-            <Products slug={slug} />
+            <Products params={awaitedParams} searchParams={awaitedSearchParams} />
             <Pagination />
           </div>
         </div>

components/Products.tsx

@@ -3,19 +3,19 @@
 // Name of the component: Products.tsx
 // Developer: Aleksandar Kuzmanovic
 // Version: 1.0
-// Component call: <Products slug={slug} />
-// Input parameters: { slug }: any
+// Component call: <Products params={params} searchParams={searchParams} />
+// Input parameters: { params, searchParams }: { params: { slug?: string[] }, searchParams: { [key: string]: string | string[] | undefined } }
 // Output: products grid
 // *********************
 
 import React from "react";
 import ProductItem from "./ProductItem";
 
-const Products = async ({ slug }: any) => {
+const Products = async ({ params, searchParams }: { params: { slug?: string[] }, searchParams: { [key: string]: string | string[] | undefined } }) => {
   // getting all data from URL slug and preparing everything for sending GET request
-  const inStockNum = slug?.searchParams?.inStock === "true" ? 1 : 0;
-  const outOfStockNum = slug?.searchParams?.outOfStock === "true" ? 1 : 0;
-  const page = slug?.searchParams?.page ? Number(slug?.searchParams?.page) : 1;
+  const inStockNum = searchParams?.inStock === "true" ? 1 : 0;
+  const outOfStockNum = searchParams?.outOfStock === "true" ? 1 : 0;
+  const page = searchParams?.page ? Number(searchParams?.page) : 1;
 
   let stockMode: string = "lte";
 
@@ -40,28 +40,18 @@ const Products = async ({ slug }: any) => {
   // sending API request with filtering, sorting and pagination for getting all products
   const data = await fetch(
     `http://localhost:3001/api/products?filters[price][$lte]=${
-      slug?.searchParams?.price || 3000
+      searchParams?.price || 3000
     }&filters[rating][$gte]=${
-      Number(slug?.searchParams?.rating) || 0
+      Number(searchParams?.rating) || 0
     }&filters[inStock][$${stockMode}]=1&${
-      slug?.params?.slug?.length > 0
-        ? `filters[category][$equals]=${slug?.params?.slug}&`
+      params?.slug?.length! > 0
+        ? `filters[category][$equals]=${params?.slug}&`
         : ""
-    }sort=${slug?.searchParams?.sort}&page=${page}`
+    }sort=${searchParams?.sort}&page=${page}`
   );
 
   const products = await data.json();
 
-  /*
-    const req = await fetch(
-    `http://localhost:1337/api/products?populate=*&filters[price][$lte]=${
-      searchParams?.price || 1000
-    }${searchParams.women === "true" ? "&filters[category][$eq]=women" : ""}${searchParams.womenNewEdition === "true" ? "&filters[category][$eq]=women%20new%20edition" : ""}&filters[rating][$gte]=${
-      searchParams?.rating || 1
-    }`
-  );
-  const products = await req.json();
-  */
   return (
     <div className="grid grid-cols-3 justify-items-center gap-x-2 gap-y-5 max-[1300px]:grid-cols-3 max-lg:grid-cols-2 max-[500px]:grid-cols-1">
       {products.length > 0 ? (