Tutorial

How to set up a one-page check-out flow in Next.js for commerce

The idea behind Medusa Express is to make the purchasing experience as frictionless and easy to set up as possible.next.js commerce

Introduction

Medusa is an open source headless ecommerce platform that enables you to set up a custom and flexible e-commerce setup. The creators of Medusa recently launched a new project called Medusa Express.

The idea behind Medusa Express is to make the purchasing experience as frictionless and easy to set up as possible. It is also great for businesses that aren’t looking into starting a full fledges store but want to easily sell their products online. The customer visits the link of the product, chooses the variant they wish to buy and then completes the checkout process. This will be beneficial as it allows you to store products as clickable links, which is great for businesses and developers that don’t want (or need) to build the entire storefront on their own.

For more inspiration on the type of use cases we have seen already, please check out our initial introductory article on the topic.

What it is

In this article, I will dive deep into how to set up Medusa Express using NextJS. The checkout page will function like this:

Next.js commerce

You can view the demo by going to this link: https://medusa.express/t-shirt

How to Setup Medusa Express

  1. npx create-medusa-app@latest

    Fill in your details and choose medusa.express (Next.js) from the options

    Next.js commerce

    After this command is done, you’ll find three folders: admin, backend and storefront

    Next.js commerce

  2. Navigate to your backend folder and run the following commands:

    cd medusa-express-test/backend
    
    npm install -g @medusajs/medusa-cli
    medusa develop

    Here, we’re downloading the medusa CLI tool globally to run the server that will have our seeded data. The server will run by default on localhost:9000. You can view all the products you have by visiting localhost:9000/store/products in your browser or postman to see all the available products you have.

    Next.js commerce

    Please notice the “handle” attribute in each product data as this is the attribute we’ll use as the end point for every product in our website.

  3. Create a .env.local file and make sure you add the following environment variables:

    NEXT_PUBLIC_MEDUSA_BACKEND_URL=http://localhost:9000
    # Stripe key is required for completing orders
    NEXT_PUBLIC_STRIPE_API_KEY=pk_test_...

    You can get your stripe API key from here: API keys | Stripe Documentation.

  4. Run your storefront app

    npm run dev

    and you’re ready to go! You’ll find the storefront running on localhost:8000 by default. You’ll be met by this template page:

    Next.js commerce

  5. Go to the checkout page

    You’ll find the checkout page for any of your products if you add “/” at the end of the URL

    examples:

    1. “localhost:8000/sweatshirt”

      Next.js commerce

    2. “localhost:8000/sweatpants”

      Next.js commerce

Why Use Medusa Express?

Using Medusa Express will be the perfect choice if you are:

  • A business owner that wants to save time and money when building your website.
  • A developer hobbyist that wants to practice building e-commerce apps without getting into the nits and grits of building a checkout process.
  • A person who loves open-source products and wants to help the community by trying out products and giving feedback to the creators and contributors.

The solution is built on top of Medusa’s ecommerce backend which gives you a great place to manage orders, products, customers etc. For more info on how to set up a Medusa backend, check out the introductory article on the topic.

Conclusion

In this article, we went through how to set up Medusa Express on your local machine, you can now use Medusa Express for a frictionless purchasing experience. If you have any questions or ran into any errors, you can always reach out on discord where you’ll find help!

Person photo
Yosra SurnameFeb. 22, 20222 min.

Want to know more about Medusa

Find related blog posts below

Tutorial

How to Create Custom Endpoints in Medusa

In this tutorial, you’ll learn how to create custom endpoints on your Medusa server for both the storefront and admin.

Tutorial

How to Create a Comic Book Online Store with Medusa, Gatsby, PayPal, and MeiliSearch

In this tutorial, you’ll learn how to create a comic book store with Medusa and add important ecommerce features.

Tutorial

Medusa Open Source Marketplace Part 2: Make Orders Vendor Specific

In this part, you’ll learn how to link orders to their respective stores in a marketplace.

NEWSLETTER

Receive the most important updates around Medusa and our ecosystem