Announcing Next.js Starter with App Router support
Tags: medusa, nextjs, typescript, tailwindcss
Published: 2023-07-13 10:32:55


Unique commerce experiences begin at the frontend. We are therefore excited to announce our newly updated [Next.js Starter Template ](https://github.com/medusajs/nextjs-starter-medusa)with App Router support as an easy way for developers to get started building performant storefronts for Medusa.

The template combines Next.js 13, Tailwind, and Typescript for a modern stack and comes with key e-commerce features out-of-the-box. The template and Medusa’s commerce building blocks ensure developers can focus on building customer-facing features that create value instead of rewriting table-stakes logic.

Visit the hosted [demo of the template](https://next.medusajs.com/). Or, [learn how to set it up in our Docs](https://docs.medusajs.com/starters/nextjs-medusa-starter).

{% embed https://www.youtube.com/watch?v=4S7sWxUnrI8 %}

## About Medusa

Medusa is an SDK for commerce consisting of Node.js packages with core logic for [carts](https://docs.medusajs.com/modules/carts-and-checkout/overview), [discounts](https://docs.medusajs.com/modules/discounts/overview), [products](https://docs.medusajs.com/modules/products/overview), [order management](https://docs.medusajs.com/modules/orders/overview), and more. In combination, the packages provide a digital commerce API with default behavior similar to other platforms’ APIs. But, unlike other platforms, Medusa is easily extended and customized to create rich and differentiated customer experiences when needed.

## Next.js 13 Support

The Medusa Next.js Starter Template has been fully updated to support Next.js 13 and App Router, which unlocks [easy dynamic routing](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes) based on your data and improved SSR with [React Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components). Additionally, Next.js 13 introduces new features and improvements for font loading, serverless support, and efficient image optimization, making it a great foundation for performant e-commerce storefronts.

## Template Features

Out of the box, our Next.js Starter Template comes with the following features:

### Product Detail Pages

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaf8axyxg9vckisdhx0i.png)

### Product Overview Page

Guide your customers through your product range with intuitive product overview pages. Our Starter Template enables you to showcase your products in an organized manner with collection filters automatically generated.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhi7m4yfb55i1c6r0py3.png)


### Product Search Integrations

The Medusa Next.js Starter Template supports popular instant-search providers [Melliseach](https://github.com/medusajs/medusa/tree/develop/packages/medusa-plugin-meilisearch) and [Algolia](https://github.com/medusajs/medusa/tree/develop/packages/medusa-plugin-algolia) out of the box. With these integrations, you can provide fast and accurate search results.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30ixh9uzkds6hm4jsx09.png)

### Product Collections

Create product collections to highlight specific themes, seasons, or promotions. With our Starter Template, collection pages are dynamically created, filterable, and added to the theme footer.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmrmyym67mpsptltisca.png)

### Cart

Our Starter Template provides robust cart functionality, allowing customers to conveniently add products, view their cart contents, and modify quantities. The cart is stored in the database and persistent over multiple user sessions. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itsvy4zvrfr5icyoj2xt.png)

### Checkout with Payment Integrations

Ensure a secure and seamless checkout process with integrated payment gateways. The Medusa Next.js Starter Template seamlessly works with popular payment providers [PayPal](https://github.com/medusajs/medusa/tree/develop/packages/medusa-payment-paypal) and [Stripe](https://github.com/medusajs/medusa/tree/develop/packages/medusa-payment-stripe), out of the box. Enable your customers to complete their purchases smoothly, using familiar payment methods.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3i8k6y2wizc1uufi9ev.png)

### User Accounts


Foster personalized experiences and customer loyalty by implementing user account functionality. With our Starter Template, customers can create accounts, manage their profiles, and access their order history.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a494wsjerq8z7sunxye0.png)


### Order Details


Keep your customers informed and satisfied with real-time order updates. The Medusa Next.js Starter Template enables you to provide order status, shipping information, and tracking details, ensuring transparency throughout the entire purchase journey.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1of7te1qral70iotzt5.png)

## More Medusa and Next.js


{% cta https://github.com/medusajs/nextjs-starter-medusa %} Clone the Medusa Next.js Starter Template from GitHub {% endcta %} 


Or check out our other Next-focused product launches, like our [Product Module](https://docs.medusajs.com/modules/products/serverless-module) that allows you to access Products, Variants, Categories, and more through a standalone package that can be installed and run in Next.js functions. Read more about it in our [latest announcement post](https://medusajs.com/blog/announcing-product-module/), or check out how we used it to create a [personalized storefront experience in our demo](https://product-module.medusajs.com/).