Add and Style a Grid of Products with Images in a Next.js React App

The core of any shopping experience is simply being able to see what the store has to offer! This includes what products are available and how much each one of them costs.

While we can do this in a variety of ways, a common way is to show a grid of products where we can see everything the store has to offer (or a lot of it). Using some HTML and CSS, we can create our product grid allowing our customers a look into our store.

The default Next.js template has 'cards' that will serve us well in displaying the products that we want to sell. We will upgrade these cards to handle images and be positioned and styled to our liking.