app/page: products list markup

app/page.js

@@ -1,3 +1,46 @@
-export default function Page() {
-    return <h1>Hello, Next.js!</h1>;
+import Link from 'next/link';
+import Image from 'next/image';
+
+import { getCollectionProducts } from 'lib/shopify';
+
+export async function HomeProduct({ product }) {
+    const featuredImage = product?.images?.[0];
+
+    return (
+        <Link href={`/${product?.handle}`}>
+            <Image
+                src={featuredImage?.url}
+                alt={featuredImage?.altText}
+                width={featuredImage?.width}
+                height={featuredImage?.height}
+            />
+            <p>{product?.title}</p>
+        </Link>
+    );
+}
+
+export default async function HomePage() {
+    const collection = process.env.HOMEPAGE_COLLECTION;
+    const products = await getCollectionProducts({
+        collection,
+    });
+
+    console.log({ collection, products });
+    // console.log({ img: products[1].images });
+
+    return (
+        <>
+            {products.length === 0 ? (
+                <p>{`No products found`}</p>
+            ) : (
+                <ul>
+                    {products.map(product => (
+                        <li key={product?.handle}>
+                            <HomeProduct {...{ product }} />
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </>
+    );
 }