Medusa won the Golden Kitty Award for Best Ecommerce Product ✨  Learn More

Medusa Logo
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
  • Developers
  • Blog
  • Pricing
  • Community
  • About
  • Careers
  • Get Started
Community

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

Share

Person photo
Yosra SurnameFeb. 22, 2022• 2 min.

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!

Share

Medusa Newsletter

Stay up to date

In our Newsletter you get the most important Medusa news directly in your inbox

Up Next

Deploy a Medusa Server on AWS with Microtica

A Step-by-Step Tutorial on How to Deploy a Medusa Server on AWS

Learn how to deploy Medusa on AWS with Microtica

Person photo
Marija NaumovskaJan. 16, 2023• 3 min.

You may also like

Use ChatGPT to Automate Product Description Writing

Use ChatGPT to Automate Product Description Writing

Never think about product descriptions. Automate product description creation with ChatGPT and Medusa

Person photo
Ashutosh KrishnaJan. 19, 2023• 7 min.
Roadmap update - Jan 2023

Roadmap update - Jan 2023

Keep reading to learn about what’s in store for future versions of Medusa.

Oliver Juhl
Oliver JuhlJan. 17, 2023• 4 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Order Edits and Payment Collections are now available

Order Edits and Payment Collections are now available

Learn more about Medusa’s new order-editing feature and how it works

Person photo
Sebastian RindomJan. 25, 2023• 2 min.
Ecommerce APIs: What they are and how they work

Ecommerce APIs: What they are and how they work

This article first discusses the basics of ecommerce APIs and an in-depth evaluation of an open source ecommerce API-first solution —Medusa.

Person photo
Esther ChristopherJan. 23, 2023• 7 min.
Use ChatGPT to Automate Product Description Writing

Use ChatGPT to Automate Product Description Writing

Never think about product descriptions. Automate product description creation with ChatGPT and Medusa

Person photo
Ashutosh KrishnaJan. 19, 2023• 7 min.
Roadmap update - Jan 2023

Roadmap update - Jan 2023

Keep reading to learn about what’s in store for future versions of Medusa.

Oliver Juhl
Oliver JuhlJan. 17, 2023• 4 min.
Inspired by Git: How we Designed our Order-Editing Feature

Inspired by Git: How we Designed our Order-Editing Feature

This article covers how we adopted principles from the Git version control system and GitHub in our Order Editing API design.

Oliver Juhl
Oliver JuhlJan. 25, 2023• 4 min.
Order Edits and Payment Collections are now available

Order Edits and Payment Collections are now available

Learn more about Medusa’s new order-editing feature and how it works

Person photo
Sebastian RindomJan. 25, 2023• 2 min.
Medusa Logo

Product

Medusa for B2BIntegrationsGet StartedCareers
We're hiring

Developers

DocsAPI ReferencesCommunityDiscussions

Medusa

BlogPricingAboutContact Us

Newsletter

Get a summary of what we’ve shipped during the last month, behind the scenes updates, and team picks. Unsubscribe any time.

© 2023 MedusaJS, Inc.