The Medusa Next.js Starter Template has been a popular starting point for Next.js developers working with Medusa. We thought it deserved some love, so the Starter just got a big update with a complete design overhaul, Medusa UI components, Next.js 14, and better product search.
The goal of the Starter is to provide a foundation for developers to build on. It consists of a fully functional ecommerce frontend, already connected to a Medusa backend. We aimed for a design that is fresh but neutral so you can easily customize it to fit your brand.
Medusa UI Support
We redesigned the Starter to work with Medusa UI components and icons. This results in a fresh, recognizable design language and components that allow for easy customization.
Medusa UI is a React implementation of the Medusa design system. The collection includes components, hooks, utility functions, icons, and Tailwind CSS classes. It's designed for building a consistent user interface across Medusa Admin and other Medusa applications.
Ready for Medusa 2.0
While we work toward Medusa 2.0, you can already try out some of our cutting-edge serverless modules with the Next.js Starter. The Starter has support for both the Product and the Pricing module, as well as Remote Query to build your own serverless product endpoints. If you’re feeling adventurous, you can enable these experimental features by enabling the
feature flag in both the Starter and the server.
New design showcase
The homepage has been cleaned up and now shows featured product collections.
Product detail page
The product detail page has a new layout and now uses Medusa UI components.
Product overview page
The product overview page has been redesigned and now features sorting out of the box.
The Starter already supported Algolia and MeiliSearch out of the box, but now has a revamped instant search UI and a server-rendered search results page.
The new cart design is built almost exclusively from Medusa UI components.
The redesigned checkout process provides a streamlined experience, making it easier than ever for customers to finalize their purchases.
Get started with Next.js and Medusa
See the full new design in action in our updated hosted demo.
Want to build with the Starter yourself? To get started, clone the Medusa Next.js Starter Template from GitHub.
Share this post
You may also like
Feb 06, 2024
What we've learned from the transition to Next.js 14 with Server Components
Feb 01, 2024
Matt Sleeps: Elevating customer experiences at one of Europe’s fastest-growing D2C shops