layout

title

theme

featuredImage

seo_description

seo_keywords

sections

The all-in-one Next.js Starter Template, powered by Medusa.
Designed for high-performance ecommerce sites.


## The Next.js Commerce Template



small

<div style="text-align: left">Powered by</div>



Powered by Medusa, Next.js, TailwindCSS and TypeScript

3 column text

Hero

The Starter Template includes informative and visually appealing product detail pages. Display product descriptions, images, pricing, and other essential information.

medusa next.js ecommerce template product page

Product Detail

Our Starter Template enables you to showcase your products in an organized manner with collection filters automatically generated.

medusa next.js ecommerce template product overview

Product Overview

Collection pages are dynamically created, filterable, and added to the theme footer.

medusa next.js ecommerce template product collection

Product Collections

The template provides robust cart functionality. It's stored in the database and persistent over sessions.

Cart

The Next.js Starter Template works with popular payment providers PayPal and Stripe, out of the box.

medusa next.js ecommerce template checkout

Checkout

With our Starter Template, customers can create accounts, manage their profiles, and access their order history.

medusa next.js ecommerce template user account

User Accounts

## Effortlessly build fast
## Next.js ecommerce sites



leading-[0px]

Grid

The Next.js Starter designed for Medusa offers Next.js developers a comprehensive open-source solution to swiftly build efficient online stores. Medusa comes with essential ecommerce functionalities ready to go, and it's effortlessly adaptable to suit your unique requirements.


mb-1

This starter seamlessly aligns with Medusa's serverless Modules and provides complete support for Next.js 13, including App Router. It comes with built-in integrations for PayPal, Stripe, Algolia and Meilisearch, ensuring a quick setup process and a streamlined developer experience.


2 column text

## The Next.js Starter for Medusa is packed with
## features to supercharge your Next.js ecommerce site


Features Title

Manage your products, inventory, 
orders, and customers effortlessly 
with Medusa's comprehensive 
ecommerce functionality.


#### Full ecommerce support


Up to date with the latest Next.js 
version, benefiting from new 
features, enhancements, and 
security patches.


#### Next.js 13


Full support of the Next.js App 
Router, the new paradigm for 
building applications using React's 
latest features.


#### App Router


Features Grid Row 1

Handle product logic from a 
serverless Next.js function. Get fast
response times and automatic
scaling.


#### Product Module support



Provide personalized experiences
with easy-to-use customer 
account features for order tracking and 
profile management.


#### Customer Accounts


The template comes with built-in support for PayPal and Stripe for smooth and secure transactions.


#### Checkout with PayPal and Stripe


Features Grid Row 2

Join our community of developers who have chosen the Next.js Starter
for Medusa and experience a fresh approach to ecommerce.


## Get started with the Medusa
## Next.js Commerce Starter today



Next.js Commerce Template - Variant

<p class="text-regular font-medium text-theme-text-primary">
  Try Medusa
</p>
<p class="text-regular text-theme-text-secondary">
  Spin up your environment in a few minutes.
</p>



[Foraged](https://www.foraged.com/) is a two-sided marketplace for fresh wild and specialty foods like berries, mushrooms, truffles, and more. Foragers, farmers, and local stores list their products through the platform’s vendor portal, and everything from home cooks to Michelin-starred restaurants buy the products through the Foraged website or app. Using Medusa, the team has developed a custom experience where vendors can manage their entire shop from their dashboard, which is powered by Medusa. Meanwhile, customers can message, follow, and place special orders with their favorite sellers.

## **Maximum flexibility to build a custom marketplace**

As producers and users of wild and specialty foods, Foraged founders Jack and Andy noticed the difficulties in selling and procuring these foods, which mostly happened locally or via small online communities. Driven by their passion for the area, they wanted to solve this problem via an online marketplace that would make wild and specialty foods more accessible to both professional and amateur chefs while giving small local businesses a new place to find customers.

<quote name="Jack Hamrick" title="Co-founder and CEO at Foraged">
If you take this very fragmented market and combine it with an incredibly passionate community and put that together on a platform marketplace, that’s a huge unlock.
</quote>

To build a first-of-its-kind wild and specialty food marketplace, they brought together a diverse team, including experienced engineers and a chef from Michelin-starred Noma, and later brought along prominent investors, including the[ VC firm Bessemer](https://techcrunch.com/2023/07/12/foraged-mushroom-marketplace-seed/).

![foraged-marketplace](/images/image%20(25).png)

For the proof of concept, Foraged attempted two approaches: customizing a WooCommerce shop and building their own custom platform. However, both approaches had shortcomings.

With the WooCommerce shop, vendors had performance issues during traffic peaks as the application quickly got bloated from handling too many integrations. With the custom-built solution, the engineering team encountered bugs and instabilities in their ecommerce platform at every release. This was problematic since Foraged wanted to do several weekly releases as a fast-scaling company. Additionally, it was challenging to develop all commerce-related functionality from the ground up.

To solve the challenges, the team decided to look for alternative options. Specifically, the team was looking to:

*   **Support multiple vendors,** ensuring each vendor is able to handle products, shipping, orders, customers, and discount logic for their own store.

*   **Extend** **admin functionality** beyond regular commerce logic, ensuring vendors can chat with customers, track store followers, and similar.

*   **Integrate with multiple outside services** to add functionalities to the platform, like Shippo to handle vendor shipments, Auth0 for store access control, Contentful for product enrichment, etc.

The solution needed to be easily customizable and extensible to meet these requirements. Additionally, it had to provide a good developer experience when integrating with third-party solutions. The team found Medusa's modular architecture the perfect starting point for this.

<quote name="Andy Conner" title="Co-founder and Head of Product at Foraged">
Medusa was a saving grace really. There was no other alternative that would give us the control and customization options needed to build the unique customer and vendor experiences we wanted.Andy Conner, co-founder and head of product at Foraged
</quote>

## **Vendor dashboard to manage everything**

With many smaller shops and sellers on the platform, operating the store as frictionlessly as possible was a top priority for Foraged. Leveraging Medusa enabled them to focus on crafting a seamless vendor experience instead of building table-stakes commerce logic. Medusa’s modules would provide the necessary commerce features out-of-the-box while also offering the flexibility to add custom elements and integrate with 3rd party services.

![](/images/Group%2075%20(2\).jpg)

A key element in the seamless vendor experience was to ensure vendors could manage all store operations directly from their admin dashboard. To do this, Foraged enabled vendors to directly interact with 3rd party systems from the Medusa Admin, which is easily extensible through on-page [widgets](https://docs.medusajs.com/admin/widgets) or [UI routes](https://docs.medusajs.com/admin/routes) to create new pages. Some of their custom extensions include:

*   **User authentication** for store admins to sign in to their store via a Gmail account or equivalent SSO option via [Auth0](https://auth0.com/).

*   **Store dashboard** to view order notifications, find relevant articles, and access store data such as sales numbers, product views, and top-selling products.

*   **Fulfillment management** enables merchants to create shipments, print shipping labels, and track deliveries directly in their Admin. A custom [Shippo](https://medusajs.com/plugins/medusa-fulfillment-shippo/) integration powers all this.

*   **Extended product information** allows vendors to enrich product pages with additional data such as custom measurement specifications (Ozs., ltr., kg. etc.) and more product pictures using Medusa’s [Contentful integration](https://docs.medusajs.com/plugins/cms/contentful).

*   **Message app for** customers to directly message vendors with order inquiries, product questions, and more powered by [SendBird](https://sendbird.com/). Vendors can manage all chats directly from their admin dashboard.

*   **Waitlist feature** allows vendors to receive notifications when a customer signs up for a [product that is currently out of stock](https://medusajs.com/plugins/medusa-plugin-restock-notification/).

*   **Follower lists** enable customers to follow and get notifications about their favorite stores’ products. Vendors can view all followers within their Admin Dashboard.

Medusa’s out-of-the-box functionalities, such as [order overviews](https://docs.medusajs.com/modules/orders/overview), [product management](https://docs.medusajs.com/modules/products/overview), [discounts](https://docs.medusajs.com/modules/discounts/overview), [gift cards](https://docs.medusajs.com/modules/gift-cards/overview), etc., created an easy-to-manage dashboard for the Foraged vendors. Likewise, Medusa’s functionality was easily linked to the storefront, allowing the team to quickly and efficiently ship a great customer-facing webpage for the vendor's products.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/foraged-cover.png">
<source src="/videos/foraged.mp4" type="video/mp4" />
</video>

## **Improved development speed**

In addition to providing the team with the flexibility to build a customized vendor and customer experience, Medusa enabled the team to move much faster than anticipated. Previously, they had a troubled release process with several instabilities, but now they can ship multiple times per week without issues. Furthermore, pre-built Medusa integrations for solutions such as [Contentful](https://docs.medusajs.com/plugins/cms/contentful), [Stripe](https://docs.medusajs.com/plugins/payment/stripe), [Algolia](https://docs.medusajs.com/plugins/search/algolia), and others helped the team quickly get up and running.

<quote name="Andy Conner" title="Co-founder and Head of Product at Foraged">
We now release to production several times a week as Medusa is just easy to work with. Shifting to Medusa has felt a bit like going from building a car from scratch to getting our own custom one where we just had to hook up the wires and put them together.
</quote>

Next up, the team is looking to include subscription payments, allowing customers to subscribe to certain specialty foods for monthly deliveries. Aside from this, they are working on enabling vendors to create storefront customizations and utilizing Algolia to power dynamically populated shopping experiences that make it easier for customers to discover relevant products on the marketplace.


Foraged: Building a custom marketplace experience with Medusa

At Medusa, we’ve always focused heavily on empowering businesses to build products for a global audience with features like [multi-currency and multi-regional support](https://docs.medusajs.com/recipes/multi-region).

Today, we are excited to bring the same level of internationalization to Medusa Admin with the introduction of multi-language support. Multi-language support allows merchants to operate Medusa Admin in their preferred language by choosing from already-supported locales or creating new translations themselves.

This version includes translations in English, French, and Portuguese.

## Configuring your language

To configure your preferred locale, navigate to your store settings and select it from the list of supported languages:

![](/images/translations-medusa.gif)

The configuration will be specific to you and stored in your browser. This means you don’t have to worry about messing up your co-workers’ experience when choosing the locale for your Medusa Admin. However, this also means you might occasionally need to re-configure it if the browser storage is cleared.

## Adding new translations

If your preferred language is not currently supported, we encourage you to create and contribute with new translations to our project. This way, our community and users all over the world can benefit from them, and you will take part in helping us become the globally preferred commerce solution.

The process of adding a new translation file is relatively straightforward. You need to clone our [project](https://github.com/medusajs/medusa), copy one of the existing translation files, rename the file to the locale you are adding, and fill in all the translations.

For a detailed step-by-step guide, refer to our documentation covering [creating new admin translations](https://docs.medusajs.com/contribution/admin-translations).

## What’s next?

Multi-language support in Medusa Admin is the first step toward a fully internationalized merchant experience.

In the future, we will ship multi-language support to [Widgets](https://docs.medusajs.com/admin/widgets) and [UI Routes](https://docs.medusajs.com/admin/routes), so your Admin Extensions are displayed according to the locale setting of your store.

Additionally, we plan to support translation overrides, enabling you to replace existing translations with your own from your Medusa project. This feature will be useful in creating a bespoke merchant experience and will ensure that you can use admin extensions even if they are yet to be translated by the plugin author.

## Acknowledgments

Multi-language support was built entirely by community contributors [Geoffroy Empain](https://github.com/gempain) and [Mohammad Javad](https://github.com/mj-mehdizadeh). We owe them a huge thanks.

This is another testimony to open-source software's power and a great motivation for us (and you) never to stop building in public.


Announcing Multi-language support in Medusa Admin

With a market cap of +$10bn, CP Axtra Public Company Limited, is the number one wholesale operator in Thailand with their chain of Makro centers. The company operates over 155 outlets in 5 countries.  CP Axtra chose Medusa for their online platform, [Makro PRO](https://www.makro.pro/), which processes hundreds of individual and business orders from stores across Thailand every hour.

With Medusa’s building blocks, the Makro team simplified complexity and automated order management for Makro PRO, and they are now expanding the use of Medusa as their omnichannel order orchestration solution across all digital sales.

## Complexity at scale

![Makro PRO overview](/images/Makro%20Pro%20overview%20(2)-a93e503e.svg)

Makro PRO offers thousands of products across various categories such as food, home appliances, and electronics. Customers can access the store through [Makro PRO](https://apps.apple.com/us/app/makro-pro/id1570380497) mobile app and website. Orders are dispatched from over 100 stores across Thailand every hour. This expedited service requires efficient routing of fulfillments to nearby stores and third-party distributors.

In addition to the complex fulfillment handling, Makro PRO needed a commerce backend that would support:

*   **High order volume:** The solution needs to handle more than 5,000 orders daily, some of them including hundreds of line items, without compromising performance.
*   **Custom-built stack:** The solution must seamlessly integrate with their custom-built services, enabling them to retain control over essential elements like checkout, payment, and product services.
*   **Scalable**: The solution needs to handle orders from a product assortment curated across hundreds of Makro shops in Thailand along with its 3rd party distributor network.

## From monolith to modular

Makro PRO initially used a leading proprietary solution as their commerce backend but found their APIs increasingly difficult to integrate with as they rolled out [makro.pro](http://makro.pro/) across more stores in their network. For example, Makro reached rate limits and had to compromise on features due to the rigidity of its API.

The limitations led the team to search for a more adaptable solution. Building from scratch would be too time-consuming, so the team looked for a solution that would be great to work with for the team’s internal users but also be flexible enough to build great end-customer experiences around. The team evaluated various SaaS and open-source alternatives but ultimately chose to embrace Medusa, which would allow them to maintain data and stack ownership while providing core commerce primitives to build great customer experiences around.

<quote name="Pradeep Kumar" title="Tech Lead on the project">
Medusa offered the flexibility we needed to build a scalable setup. We could use our own custom checkout, fulfillment, and payment services while leveraging Medusa’s event-driven architecture for interprocess communication.
</quote>

## Medusa for Omnichannel Order Orchestration

![Omnichannel commerce setup](/images/Makro%20Pro%20setup%20(2\).svg)
Medusa is utilized as a central hub for order orchestration. Once orders pass through from one of Makro's storefronts, they are registered within Medusa and broken down by fulfillment type:

*   **1st party fulfillment** (1P) orders are sent to a custom-built system that coordinates the fulfillment across Makro stores.
*   **3rd party fulfillment** (3P) orders are sent to [Mirakl](https://www.mirakl.com/), a platform coordinating Makro's network of third-party sellers.

The Makro team utilized Medusa's customizable and event-driven architecture to manage the complexity of multiple fulfillment types per order. The team created a plugin using webhooks that allows Medusa to update the order statuses (in process, fulfilled, returned etc.) based on events triggered within the 1P and 3P systems. This enables Medusa to act as a unified order overview, which customer support uses as a reference point to check order statuses in real-time.

Similar custom integrations were also implemented for refund orchestration via their custom payment service.

<quote name="Thanakrit Gwan Juthamongkhon" title="Module lead on the project">
The design of the core modules [in Medusa] is consistent, it is clear how to use the database structures, and the domain modelling is done beautifully. It was easy to work with the Medusa framework.
</quote>

In the end, the Makro team successfully implemented Medusa within a few months to cover orders across Thailand. Currently, the solution processes over 5,000 orders daily.

The team now plans to extend the setup further in 2023 to let Medusa handle orders that go through sales reps, who currently create orders in a custom app for their B2B customers.


Makro PRO uses Medusa’s order management module to orchestrate +180,000 orders and +$300M in GMV yearly.

Omnichannel Order Orchestration of +5,000 daily orders at Makro Pro

We are excited to announce that [the Figma Community file for Medusa UI is now live](https://www.figma.com/community/file/1278648465968635936). The React component library for Medusa UI was introduced together with the [general availability of Admin Extensions](https://medusajs.com/blog/medusa-ui-and-general-availability-of-admin-extensions/) to make it simple to build beautiful extensions. Now, plugin authors (and anyone else curious) can build their designs in Figma using the same system our design team uses. Below, we share some of the core principles of the Medusa UI design system and its significance.

## Focus on function

The fundamental principle driving Medusa UI is simplicity, functionality, and low maintenance. We've streamlined the system to be lightweight yet effective, emphasizing the essentials without unnecessary complexities. Our approach is to include just the right amount of tokens and components so the designer using the system feels empowered and not overwhelmed.

Medusa UI embodies this principle through its straightforward approach. It is based on just two core elements: Tokens and Components. Tokens are named after their functionality and not their value. At first glimpse, this seems like a lot, but once you start using the system, you feel the speed. For instance, when designing, one can easily access default background colors by typing "bg-base" or default text colors with "fg-base”

![](/images/default-fg-colors.jpg)

All with variations referring to their function like Hover, Pressed, etc. You don’t need to remember what shade of Grey you decided to go with when you cursor over Secondary Buttons. Similarly, typography is organized into groups like Headers, Text, and Code. For some components, we use the very popular principles of Atomic Design Systems, but only if/when it makes sense. Some components are just components if it is faster to use and build it that way. We don’t rely on some heavy guidelines other than keep asking ourselves when we add new stuff: Does this speed up the design and development process?

## What's next?

If you want to dive deeper, we encourage you to explore Admin Extensions as a place to experiment with Medusa UI to integrate with the Admin Dashboard seamlessly. Furthermore, we are eager to get suggestions from the community on improvements to the system or requests for additional components to include. Reach out on [Discord](https://discord.gg/medusajs) or [Github](https://github.com/medusajs/medusa) to share your thoughts.


We are open-sourcing the companion design file for Medusa's UI library. Available now in Figma Community.

Medusa UI in Figma Community

Medusa UI and general availability of Admin Extensions

During [Recap](https://medusajs.com/recap/) in June, we announced the [beta launch of Admin Extensibility](https://medusajs.com/blog/announcing-admin-extensions/) — a way for developers and plugin authors to create components that enrich the merchant experience through additional context and tailored workflows.

Today we are excited to announce the general availability of Admin Extensibility. To try it out, upgrade to the latest version of Medusa and check out our guide to building your first Admin Extensions. 

```bash
yarn add @medusajs/admin@latest @medusajs/medusa@latest
```

Our community has helped us improve our Admin Extensibility feature and provided input to enhance the developer experience further. One area we especially wanted to tackle was making it easy to create Admin Extensions with the same look and feel as the rest of the Admin Dashboard.  As a result, we are excited to introduce Medusa UI – a component library for building beautiful and performant Admin Extensions fast. With minimal effort, the library enables developers to achieve the same look and feel as the rest of Medusa Admin when building UI Routes and Widgets.

## Medusa UI

Medusa UI is a React implementation of the Medusa design system. Most components are based on [Radix UI Primitives](https://www.radix-ui.com/primitives), and we use [Tailwind CSS](https://tailwindcss.com/) for styling, shipping our own preset with our customizations.

We aimed to keep the component APIs light, composable, and reasonably unopinionated. Much like the primitives we have built upon, we have tried to leverage and respect the native HTML API as much as possible, and we hope you will find the components easy to get started with and put together to build the experiences you need.

Using Medusa UI in an Admin Extension can be as simple as:

```tsx
import type { WidgetConfig } from "@medusajs/admin"
import { Button, Container, Heading } from "@medusajs/ui"

export default ({ order }) => {

  const sendOrderToErp = () => {
    // POST order details to your ERP
  }

  return (
    <Container>
      <Heading>Your ERP</Heading>
      <Button onClick={() => sendOrderToErp()}>Push order</Button>
    </Container>
  )
}

export const config: WidgetConfig = {
	zone: "order.details.after",
} 
```

To help you get started with Medusa UI, we have published [its own Documentation site](https://docs.medusajs.com/ui). This should get you up and running and provide more information on the available components and how to use them. You will also find information on Medusa Icons we have made public and more details on theming.

In the coming weeks, we aim to provide more composition and complex Medusa-specific examples within the docs.

## What’s next?

To get started building Admin Extensions, visit the guide in [Our Documentation](https://docs.medusajs.com/admin/widgets). We are excited to see how this new feature will be leveraged to build powerful digital commerce applications.

The Medusa community constantly makes new additions to the Medusa ecosystem. We are always excited about these contributions, which range from plugins to platforms and templates. Currently, our [Plugin Library](https://medusajs.com/plugins/) has more than 100 open-source plugins available via npm. Below, we wanted to highlight some of the latest additions from our community members.

## Latest community contributions

### SvelteKit Storefront Starter for Medusa

![SvelteKit-Medusa](/images/Untitled%20(14\)-87873634.png)

In our most recent [community highlight](https://medusajs.com/blog/community-highlights-1/), we were excited to announce the introduction of the SvelteKit client. Now, [Lacey Pevey](https://github.com/pevey) made it even easier to get started using [Svelte](https://kit.svelte.dev/) with her new [SvelteKit eCommerce Store Starter](https://github.com/pevey/sveltekit-medusa-starter/tree/main), a Svelte storefront designed to integrate with your Medusa backend seamlessly.

The starter uses the [SvelteKit client](https://medusajs.com/plugins/sveltekit-medusa-client/) behind the scenes to interact with the Medusa backend. It comes with ready-to-use pages like a product gallery and product detail pages. You will also find auth, cart, and checkout flows implemented in the starter. All the pages and flows are customizable to adapt the template to your use case.

You can watch Lacey set up Medusa with Svelte in her latest video from the Svelte Society, [here](https://www.youtube.com/watch?v=rVVHxows9dY).

### Postmark Plugin

[Bram Hammer](https://github.com/breakerh) recently contributed with a new [Postmark plugin](https://medusajs.com/plugins/medusa-plugin-postmark/). The plugin lets you use the Postmark service as a [notification provider](https://docs.medusajs.com/development/notification/overview) with your Medusa backend. This can be useful for upselling and transactional emails, among other things.

Bram even took this plugin a step further by adding support for generating and attaching PDF invoices and credit notes to customer emails. Additionally, it lets you send personalized reminder emails to customers who have abandoned their cart or upselling emails to customers who have recently purchased from specific collections.

### Medusa Blog Plugin

[Lacey Pevey](https://github.com/pevey) developed a [blog plugin](https://medusajs.com/plugins/medusa-plugin-blog/) for users managing blog pages as part of their commerce site. This plugin expands the capabilities of your Medusa backend by enabling you to organize and manage blogging content.

With this plugin, you can create your own blog posts and conveniently categorize them using tags such as product, collection, or custom values already existing within your store. Additionally, it enables you to query and retrieve all your blog posts based on various criteria, including tags, categories, products, or collections, for a more user-friendly blog experience.

### Medusa Admin Flutter in beta

![Medusa-Admin-Flutter](/images/Medusa-Admin-Mobile-Screenshot-48f33110.png)

[Ragheb](https://github.com/mllrr96) is developing a mobile-optimized Medusa Admin app using Flutter for iOS and Android. The app is currently in beta, but you can test it and keep track of newly added features and enhancements by visiting its [git repository](https://github.com/mllrr96/Medusa-Admin-Flutter).

Despite being in beta, the app already offers a range of valuable features, such as updating store settings (regions, sales channels, etc.) and managing collections of products, customers, and discounts. The app also includes a built-in dark mode feature.

### Canada Post Fulfillment plugin

[Alexghebo](https://github.com/alexghebo) created a [Canada Post plugin](https://medusajs.com/plugins/medusa-fulfillment-canadapost/) for integrating your Medusa backend with the Canada Post fulfillment provider, which can be utilized during the checkout process and throughout the order management workflow.

The plugin enables customers to access real-time shipping rates and track their orders. It also allows merchants to manage shipping labels, generate customs documentation, and monitor shipment statuses, ultimately enhancing the overall shopping experience for buyers and sellers.

### Platform.sh for Medusa deployment

[Vinnie Russo](https://github.com/vincenzo) built a [Platform.sh template](https://github.com/platformista/medusa) designed to ease the deployment process for a Medusa ecommerce solution. The template includes the essential Medusa backend infrastructure, the admin dashboard, and the Next.js storefront.

The template allows users to use [Platform.sh](https://platform.sh/)’s infrastructure to launch their Medusa ecommerce shop with a single click. [Platform.sh](https://platform.sh/) is a PaaS that offers a unified solution for building, running, and scaling websites and applications.

## Community Radar

<tweet tweetId="1679568690138980352" />

Shout-out from the Vercel-team to our updated Medusa Next.js Starter Template with App Router support.

<tweet tweetId="1687131317845037059" />

[Lacey Pevey](https://github.com/pevey) shows how to combine Svelte and Medusa on the latest live stream from the Svelte Society.

<tweet tweetId="1685718106583293952" />

Adil showing off some well-deserved Medusa merch from his community contributions.

## Created something cool with Medusa? Let us know!

We would love to hear about the cool projects you’ve created with Medusa. Whether it’s plugins, widgets, storefront starters, your own store built with Medusa, or anything similar.

You can share all your cool projects in the *#Showcase* channel on our [Discord](https://discord.com/invite/medusajs) where we usually collect the latest community highlights. You can also learn how to publish your plugins on our Plugin Library using this guide in our [documentation](https://docs.medusajs.com/development/plugins/publish).


Community Highlights: Svelte Storefront, Medusa Flutter Admin, and lots of new plugins

excerpt

markdown_content

date

authors

postSeries

Announcing Next.js Starter with App Router support


Medusa is introducing Admin Extensibility in public beta to enable easy customization of Medusa's Admin dashboard. With Admin Extensibility, developers can create Widgets with custom React components that enrich the merchant experience through additional context and tailored workflows.


Admin Extensibility is a big addition to Medusa's capabilities for supporting rich digital commerce applications. With the launch of our public beta, we hope to give developers more power when solving commerce problems, and we would love to hear your feedback on further improving the feature.


## How Widgets work


Widgets allow developers to add custom React components in injection zones spread across existing pages in the Admin Dashboard. For example, you can add a button on the order details page that links to the order in an integrated ERP system.


Widgets are easy to build, and Medusa automatically registers them when exporting a React component and its configuration from files placed in the `src/admin/widgets` directory in your project or plugins.


For example, you can add a link to an ERP system in your order details page with the following widget:


```typescript
// my-plugin/src/admin/widgets/erp-button.tsx

import type { WidgetConfig } from "@medusajs/admin"

export default ({ order }) => {
  const link = `https://myerp.com/orders/${order.id}`
  return (
    <a href={link}>
	    View in MyERP
	</a>
  )
}

export const config: WidgetConfig = {
  zone: "order.details.after"
}
```


Widgets can be placed on most existing pages in the Admin Dashboard, and often there are multiple zones within each page.


You can learn more about widgets in [our documentation](https://docs.medusajs.com/admin/widgets).


## Admin UI Routes


Another aspect of admin extensions that we’re introducing is Admin UI Routes. You’ll be able to add new routes into your admin dashboard in routes similar to Next.js 13 routes.


Similar to Widgets, Admin UI Routes are simply exported React components created in files under the `src/admin/routes` directory. You can also specify that these routes can be added into the sidebar.


For example, you can add a new “Custom Route” link into the sidebar by creating the following component:


```typescript
// src/admin/routes/custom/page.tsx

import { RouteConfig } from "@medusajs/admin"
import { CustomIcon } from "../../icons/custom"

const CustomPage = () => {
  return (
    <div>
      This is my custom route
    </div>
  )
}

export const config: RouteConfig = {
  link: {
    label: "Custom Route",
    icon: CustomIcon,
  },
}

export default CustomPage
```


You can learn more about Admin UI Routes in [our documentation](https://docs.medusajs.com/admin/routes).


## Enhanced Developer Experience


An important constraint for our work when building Admin Extensibility was ensuring a great development workflow.


As mentioned, we are therefore introducing the `src/admin/widgets` and `src/admin/routes` directories as new special directories in Medusa plugins and projects. The Medusa core automatically scans for valid Widgets and Admin UI Routes during build time, ensuring that you don’t have to battle with configuration files and can get straight to solving the important problems you are working on.


Additionally, we extended the `medusa develop` command used to start your development server. We now listen for changes in the `src/admin` folder and hot reload your dashboard, so you can instantly view your changes as you build new Widgets and Admin UI Routes.


## Shipping admin extensions in plugins


Widgets and UI Routes can ship together with plugins, adding a new dimension to their capabilities. For example, we have added a Widget to the Stripe plugin that shows additional data like fraud evaluation on your order details page when the plugin is installed.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/custom-widget-fraud-cover.png">
<source src="/media/custom-widget-fraud.mp4" type="video/mp4" />
</video>


To ship Admin extensions with plugins, plugin developers need to run the bundle command from `@medusajs/admin` and Medusa will then automatically pick up the customization upon installation:


```bash
medusa-admin bundle
```


When installing plugins you can specify in your `medusa-config.js` file whether you want a plugin’s Admin extensions injected in your dashboard or not to ensure you are always in control of the merchant experience. Opting in to admin extensions is done with the `enableUI` option:


```javascript
// medusa-config.js

module.export = {
  ...,
  plugins: [
    {
       resolve: "medusa-payment-stripe",
       options: {
         ...,
         enableUI: true,
       }
    }
  ]
}
```


You can learn more about creating plugins including admin extensions in [our documentation](https://docs.medusajs.com/development/plugins/create).


## What’s Next?


Admin extensions are still in beta, so we will continue on improving this feature to make it stable and provide a better developer experience.


We are also excited to see what you will build with the new Admin Extensibility feature and as we continue improving the feature, we would love to hear your feedback.


If you want to learn more about Admin Extensibility, check out the docs [here](https://medusa-docs-git-docs-recap-2023-q2-medusajs.vercel.app/admin/widgets).


You can also visit our [Discord](https://discord.gg/medusajs) or [GitHub Discussions](https://github.com/medusajs/medusa/discussions) to provide feedback on the feature.



Announcing Admin Extensions

Building rich commerce experiences often starts in the front end. But the backend is what defines the boundaries of what’s possible. This realization is what motivated Medusa and our approach to simplifying commerce development.

While Medusa has made building deep customization in your backend easy, creating these customizations requires developers to switch contexts between storefront and backend codebases.

Today, we are thrilled to bring our commerce building blocks closer to frontend frameworks and serverless environments with the beta release of our Product Module.

The Product Module enables developers to access Products, Variants, Categories, and more through a standalone package that can be installed and run in Next.js functions and other Node.js compatible runtimes.

## Usage Example with Next.js

Here is what the Product Module looks like used in a Next.js function:

```
// app/api/products/route.ts

import { NextResponse } from 'next/server'
import { initialize } from "@medusajs/product"

export async function GET(request: Request) {
  const productService = await initialize()

  const products = await productService.list({
		tags: { value: ["featured"] },
	}, {
    take: 5
  })

  return NextResponse.json({ products })
} 
```

With the `initialize` call, the Product Module establishes a connection to your database and gives you a Product Service to run queries through.

When installed, the Product Module feels like an extension of your codebase that you can use to build bespoke experiences across your storefront with minimal friction and full control.

Learn more about how to use the Product module in [our documentation](https://docs.medusajs.com/modules/products/serverless-module).

## Serverless Compatibility

The Product Module works independently of your Medusa backend and can be deployed directly to serverless environments like Vercel. This new deployment mode has many benefits, like providing auto-scaling during traffic spikes without configuring advanced infrastructure.

## Product Module Demo

To demonstrate how the Product Module works with Vercel and Next.js, we have built an ecommerce personalization demo. The demo uses the visitor’s location and a user’s session to personalize what products are shown to the customer first.

The personalization code runs directly in a Next.js function deployed to Vercel and uses Medusa’s Product Module to query and respond with relevant products.

You can check out the demo [here](http://product-module.medusajs.com) and learn more about how it works.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/product-module-cover.png">
<source src="/videos/product-module.mp4" type="video/mp4" />
</video>

## Runs in any Node.js project

The Product Module can be used in any Node.js project, including other frontend frameworks like Nuxt, SvelteKit, and Remix, but also in more traditional Node applications.

This makes Medusa portable to existing projects that need to orchestrate and manage products. As more of Medusa’s features adopt this new approach, this opens an incremental migration path for larger applications.

## What’s next?

With the initial release of the Product Module, the scope has been constrained to read-only operations, but this is still powerful enough for you to play around with and understand our direction.

In the coming weeks, we will be working on adding write operations to the Product Module, making it possible to create and update Products, Variants, and more through the module.

Later this year, we will ship more modules that adopt this new approach and pushes boundaries for what’s possible in digital commerce.

If you have feedback or ideas for improvements, please join the conversation in our [Discord](https://discord.gg/medusajs) or [GitHub Discussions](https://github.com/medusajs/medusa/discussions).

Check out more product announcements on our [Recap page](https://medusajs.com/recap). You can also learn more about the Product module in [our documentation](https://docs.medusajs.com/modules/products/serverless-module).


Announcing Product Module


Digital commerce today happens across multiple channels and regions. From the beginning, Medusa was built to support omnichannel sales and with the introduction of the[ Inventory module](https://medusajs.com/blog/announcing-multi-warehouse/) in April, we further strengthened these capabilities with multi-warehouse support.

Today, we are excited to announce Reservations Management, which gives merchants a better overview and control of their inventory status.

## A real-time overview of your inventory

Reservations in Medusa are virtual reductions in stock to avoid overselling, and they are automatically created after customers place orders pending fulfillment.

With Reservation Management, we are bringing a new view to the Admin Dashboard, where merchants can see Reservations across Stock Locations.

![](/images/sc0zYs4tJO.png)

Reservations can be accessed from your inventory list to quickly answer questions like “What orders hold reservations on this item?”.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-real-time-cover.png">
<source src="/videos/reservation-management-real-time.mp4" type="video/mp4" />
</video>

## Custom reservations for new experiences

With better visibility of Reservations in the Admin Dashboard, we also enable new uses for Reservations. Merchants can now create and edit Reservations directly from Admin, and add descriptions and metadata to provide context to a Reservation’s origin.

For example, if a merchant wants to ensure stock for certain customers (e.g., physical retail customers), they can create a Reservation and specify in the description field which customers the stock is reserved for.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-custom-cover.png">
<source src="/videos/reservation-management-custom.mp4" type="video/mp4" />
</video>

We have built a demo to show how Reservations can be used as a building block in omnichannel experiences. In the demo, we walk through how to create a book-online-try-in-store feature for an e-commerce website. Customers select a size they want to try in a physical retail store, and a Reservation ensures that the item is ready for them to try when they arrive.

[The demo](https://reservation-demo.vercel.app/) uses our Inventory Module to create Reservations directly in a Next.js function.

## Filters to find what you need

Together with the new capabilities, we have added advanced filtering to ensure tracking down relevant Reservations is quick and easy. You can filter based on items, descriptions, creation dates, and more.

<video controls preload="none" style="object-fit: cover; max-height: unset; max-width: 100%; margin-left: auto; margin-right: auto;" poster="/images/reservation-management-filters-cover.png">
<source src="/videos/reservation-management-filters.mp4" type="video/mp4" />
</video>

## APIs and integrations

Reservation management has powerful APIs to enable automated orchestration and integration with ERP and IMS systems. You can learn more about the Inventory Module and its APIs in [our docs](https://docs.medusajs.com/modules/multiwarehouse/overview).

## What’s next?

Medusa makes it easy for developers to create rich digital commerce applications. With the new Reservation Management features, we are taking another step toward simplifying the complexities of omnichannel commerce, which Medusa is already being used for today.

As we build new and more advanced features to support developers in building the next generation of commerce, it’s important to ensure that the underlying data is accessible and manageable by users.

We are excited to see what creative ways you will put Reservations to use and, as always, would love to hear your feedback and input on how we can improve Medusa’s omnichannel capabilities further. Please join our [Discord](https://discord.gg/medusajs) or open a [GitHub Discussion](https://github.com/medusajs/medusa/discussions) to participate in the conversation.

Dive further into other parts of our latest release on our [Recap page](https://medusajs.com/recap).


Announcing Reservation Management

Developers

Company

Main Menu

Learn More

This plugin does not have a README.

If you want to learn how to use this plugin, we recommend one of the following steps:

1. Join our [Discord community](https://discord.gg/medusajs) and ask for help on how to use this plugin.
2. Reach out to the plugin's author to learn how to use it.