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
🎉
Top comments (0)