Step 3: Using the Sanity Client to get all product data and display t…

…hem on the page
colbyfayock · Jan 18, 2021 · 167b089 · 167b089
1 parent 72d1139
commit 167b089
Showing 1 changed file with 21 additions and 28 deletions.
diff --git a/pages/index.js b/pages/index.js
@@ -1,7 +1,10 @@
 import Head from 'next/head'
+
+import { client } from '../lib/sanity';
+
 import styles from '../styles/Home.module.css'
 
-export default function Home() {
+export default function Home({ products }) {
   return (
     <div className={styles.container}>
       <Head>
@@ -20,33 +23,14 @@ export default function Home() {
         </p>
 
         <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
+          {products.map(product => {
+            return (
+              <a key={product._id} href="#" className={styles.card}>
+                <h3>{ product.title }</h3>
+                <p>{ product.blurb.en }</p>
+              </a>
+            )
+          })}
         </div>
       </main>
 
@@ -63,3 +47,12 @@ export default function Home() {
     </div>
   )
 }
+
+export async function getStaticProps() {
+  const products = await client.fetch(`*[_type == "product"]`);
+  return {
+    props: {
+      products
+    }
+  }
+}