DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for We Released a New Next.js Ecommerce Storefront with Ready Integrations to PayPal, MeiliSearch, Stripe, and more!
Shahed Nasser for Medusa

Posted on • Originally published at medusajs.com

We Released a New Next.js Ecommerce Storefront with Ready Integrations to PayPal, MeiliSearch, Stripe, and more!

Last month, our team at Medusa built a new advanced Next.js storefront that can be used with a Medusa server. If interested in other Medusa starters, feel free to check out Medusa.Express or our Gatsby starter.

This new Next.js storefront provides a sleek design, necessary ecommerce features, and powerful integrations with third-party services and tools to use payment providers and search engines in your storefront out-of-the-box.

Read more below to learn about what this new storefront provides. You can check out the GitHub repository to get started with the storefront!

Image description

Search Engine Integration with MeiliSearch or Algolia

This storefront comes with ready integration with MeiliSearch and Algolia. This allows customers to find the product they need easily.

Image description

All that is required is to install the MeiliSearch or Algolia plugin on your Medusa server. Then, the search feature can be turned on in store.config.json:

{
  "features": {
    "search": true
  }
}
Enter fullscreen mode Exit fullscreen mode

That’s all you need to support MeiliSearch, for Algolia, an additional change is required to make in the code which can be found in the documentation.

Payment Provider Integrations with PayPal and Stripe

If you have the Stripe and PayPal plugins installed on your Medusa server, the Next.js storefront will show the necessary UI for them during checkout automatically! You can use both of the payment providers or only one of them.

All that you need to do is add the necessary API keys for Stripe and PayPal in your storefront’s environment variables:

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
Enter fullscreen mode Exit fullscreen mode

Then, if you have Stripe enabled in your Medusa server, you’ll see the card form during checkout.

Image description

If you have PayPal enabled on your Medusa Server, you’ll see the PayPal button on checkout to easily pay with PayPal.

Image description

Ecommerce Features

This storefront comes fully packed with essential ecommerce features to provide a great user experience to customers.

Products and Collections

The storefront includes seamless navigation to view both products and collections. You can also filter products by collection.

Image description

The detail page of products showcases all the product’s important information with a sleek scroll design. Customers can easily choose the product variants and add them to the cart.

Image description

Cart and Full Checkout Features

Customers can view their carts and make edits to them at any point. Then, customers can go through the one-page checkout flow to place their order.

Image description

Customer Accounts

Customers can sign up or log in to benefit from profile features such as saved addresses, order history, and more.

Image description

Completely Customizable

The entire storefront is completely customizable! You can make changes to the pages, components, and styles all available under the src directory.

This gives developers the freedom to redesign the storefront, add more features, and integrate more third-party services as they see fit.

Get Started with the Next.js Storefront

Running the Next.js Storefront requires an installed and running Medusa server. You can get started with Medusa in minutes by following the quickstart guide.

Then, installing the Next.js Storefront can be done in 3 steps:

  1. Create a Next.js project using the storefront’s starter template:
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
Enter fullscreen mode Exit fullscreen mode
  1. Change to the newly created directoryΒ my-medusa-storefront and rename the template environment variable file to use environment variables in development:
mv .env.template .env.local
Enter fullscreen mode Exit fullscreen mode
  1. Make sure the Medusa server is running, then run the local Next.js server:
npm run dev
Enter fullscreen mode Exit fullscreen mode

If you need to enable/disable any of the integrations mentioned above, check out the documentation to learn how to do it.

What do you think?

Do you like this new Next.js storefront? Do you have any feedback on how it can be improved? Let us know what you think in the comments!

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team viaΒ Discord.

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.