We Released a New Next.js Ecommerce Storefront with Ready Integrations to PayPal, MeiliSearch, Stripe, and more!
Tags: showdev, webdev, programming, javascript
Published: 2022-08-02 11:40:20

Last month, our team at [Medusa](https://github.com/medusajs/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](http://Medusa.Express) or our [Gatsby starter](https://github.com/medusajs/gatsby-starter-medusa).

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](https://github.com/medusajs/nextjs-starter-medusa) to get started with the storefront!

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

## Search Engine Integration with MeiliSearch or Algolia

This storefront comes with ready integration with [MeiliSearch](https://www.meilisearch.com/) and [Algolia](https://www.algolia.com/). This allows customers to find the product they need easily.

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

All that is required is to install the [MeiliSearch](https://docs.medusajs.com/add-plugins/meilisearch) or [Algolia](https://docs.medusajs.com/add-plugins/algolia) plugin on your Medusa server. Then, the `search` feature can be turned on in `store.config.json`:

```json
{
  "features": {
    "search": true
  }
}
```

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](https://docs.medusajs.com/starters/nextjs-medusa-starter#algolia-integration).

## Payment Provider Integrations with PayPal and Stripe

If you have the [Stripe](https://docs.medusajs.com/add-plugins/stripe) and [PayPal](https://docs.medusajs.com/add-plugins/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:

```bash
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
```

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

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

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

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

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjt0pvsfg0pm1k0pv12l.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iyr6bt8aprvwrkw0681.gif)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq9qh0rg41tmh39ncjlx.png)

### Customer Accounts

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

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

## 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](https://github.com/medusajs/medusa#getting-started).

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

1. Create a Next.js project using the [storefront’s starter template](https://github.com/medusajs/nextjs-starter-medusa):

```bash
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
```

1. Change to the newly created directory `my-medusa-storefront` and rename the template environment variable file to use environment variables in development:

```bash
mv .env.template .env.local
```

1. Make sure the Medusa server is running, then run the local Next.js server:

```bash
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](https://docs.medusajs.com/starters/nextjs-medusa-starter#development-notes).

## 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](https://discord.gg/F87eGuwkTp).