Medusa’s Next.js Ecommerce Storefront Comes Packed 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!
Search Engine Integration with MeiliSearch or Algolia
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:
Then, if you have Stripe enabled in your Medusa server, you’ll see the card form during checkout.
If you have PayPal enabled on your Medusa Server, you’ll see the PayPal button on checkout to easily pay with PayPal.
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.
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.
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.
Customers can sign up or log in to benefit from profile features such as saved addresses, order history, and more.
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:
- 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
2. 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
3. Make sure the Medusa server is running, then run the local Next.js server:
npm run dev
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.