How to Display Products with Medusa

Everyone knows Medusa, the open source Shopify alternative and Product Hunt award winner as the e-commerce solution of 2022

In this little post we are going to see how to list products with Medusa

Development

Deploy you Medusa backend on a fresh local Ubuntu Server with VirtualBox

Create a latest Nextjs App (talking about /app)

Create a file in the Nextjs App called medusa-client.js (in utils folder for example)

For info: We are just coding what is explained on the API documentation here https://docs.medusajs.com/api/store#tag/Products

import Medusa from "@medusajs/medusa-js"

//Create a Medusa instance
const medusaClient = new Medusa({ baseUrl: process.env.BACKEND_URL })

export { medusaClient }

Create the Products page.tsx

const [products, setProducts] = useState<any[]>([])

const getProducts = async () => {
  try {
    const results = await medusaClient.products.list();
    console.log(results)
    setProducts(results.products)
  } catch (error) {
    console.log(error)
  }
}

useEffect(() => {
 getProducts()
}, []);

We will discuss that <any[]> type in other posts, and how to display the prices and other fields, also why I use results and not data, but why not ...

Now you can just display the products in a TailWind CSS grid

<div className="grid grid-cols-1 gap-1">
  {products.map((product) => (
    <ProductCard product={product} key={product.id} />
  ))}
</div>

You can pick a ProductCard in hyperui.dev or use the code available on https://github.com/nazimboudeffa/medusa-storefront-coffee-nextjs

Look in next.config.js for more infos on the BACKEND_URL with the latest Nextjs version

Production

• For the backend (demo) I use railway.app $8/Month check this video but basically a little OVHCloud VPS is Okey for one store
• For the storefront (demo) I use vercel.com $20/Month
• For the domain name you can choose what you want, OVH, namecheap, ... ~$15/Year

It's still cheaper then Shopify, actually $36 and you can make many many ... many deployments

🎉