index.js

import styles from "../styles/Home.module.css";
import { getProductsInCollection } from "../lib/shopify";

// object destructuring to get the data from the query -> products
export default function Home({ products }) {
  console.log(products);
  return <div className={styles.container}>You are in the home Page</div>;
}

// this is the query that will be used to get the data from the shopify store
export async function getStaticProps() {
  const products = await getProductsInCollection();
  return {
    // this is the data that will be passed to the component as props
    props: { products },
  };
}