Medusa
Published in

Medusa

How to Create an Ecommerce Store with Next.js and Medusa

Medusa is an open source headless commerce platform giving engineers the foundation for building unique and scalable digital commerce projects through our API-first engine.

As the Medusa server is headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes.

In this tutorial, you’ll learn how to link your Medusa server to the Next.js starter. If you don’t have a Medusa server set up, please follow along the Quickstart guide to learn how you can do that.

Create Next.js Starter

Open the terminal and use the following command to create an instance of your storefront:

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

Now you have a storefront codebase that is ready to be used with your Medusa server.

Link Storefront to Your Server

By default, the storefront is linked to the server at the URL localhost:9000. If you need to change that, create the file .env in the root of your Next.js starter and add a new variable:

NEXT_PUBLIC_MEDUSA_URL=<BACKEND_URL>

Make sure to replace <BACKEND_URL> with the URL of your Medusa server.

Update the STORE_CORS variable

By default, the storefront runs at localhost:8000and the backend uses that URL to avoid CORS errors. If you need to change the URL or port, in .env file in the root of your Medusa Server add the following new variable:

STORE_CORS=<STOREFRONT_URL>

Make sure you replace <STOREFRONT_URL> with the URL to your storefront.

Start your Store

To start your store, first, you need to run the Medusa server. In the directory that holds your Medusa server run the following:

npm start

Then, in the directory that holds your Next.js storefront, run the following command:

npm run dev

Now, open the storefront at localhost:8000 (or the URL/port you specified) and you’ll see your store and the products!

Conclusion

Hooking up your headless ecommerce server with the storefront is very easy using Medusa! You can now have your entire server up and running with the products, cart, and checkout functionalities.

If you want to discover the endless possibilities of Medusa’s ecosystem you can find a lot more useful resources on our docs page which can help you to build your awesome commerce project!

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

--

--

--

Medusa is an open-source headless commerce platform built in Node.js — check out https://www.medusajs.com/

Recommended from Medium

OutSystems Integration Builder

Everything you need to know about Kubernetes Security

Agile vs Waterfall

Writing unit tests for migrations in django

5 Essential Programming Skills Every Developer Must Hone

Reduce the Run, Stabilize the Platform and Migrate to the Cloud

Our experience as developers of tooling in the Ethereum Foundation

Brand Logo Detection in Images : GCS + Cloud Run (Docker image) + Terraform

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shahed Nasser

Shahed Nasser

Full stack developer. https://blog.shahednasser.com

More from Medium

How to implement Customer Profiles in Your Next.js and Medusa Ecommerce Store

Build an Appointment Scheduler using Node, Firebase, and Vonage

No-Code vs Low-Code vs Full Code: App Development Strategies

Build Your Own Livestreaming App with Twilio Live