Testing Image component in product grid to improve performance

hernan-clich · Feb 7, 2022 · 279220e · 279220e · vercel · Feb 7, 2022
1 parent f83375b
commit 279220e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/app/screens/ProductList/components/ProductCard/index.tsx b/app/screens/ProductList/components/ProductCard/index.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 import PATHS from '~constants/paths';
 import type { TProduct } from '~types/product';
@@ -15,7 +16,7 @@ function ProductCard({ product }: Props) {
       <Styled.ProductCardLink>
         <Styled.ProductCardContainer>
           <div className="img">
-            <img src={imageUrl} alt={name} />
+            <Image src={imageUrl} alt={name} height={180} width={180} layout="fixed" />
           </div>
           <div className="text">
             <p>{name}</p>

diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,6 @@
 module.exports = {
-  reactStrictMode: true
+  reactStrictMode: true,
+  images: {
+    domains: ['firebasestorage.googleapis.com']
+  }
 };