DEV Community

Nazim Boudeffa
Nazim Boudeffa

Posted on • Edited on

3 1 1 1 1

How to Display Products with Medusa

Image description

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 }
Enter fullscreen mode Exit fullscreen mode

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()
}, []);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

🎉

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay