How to Set up a Next.js Storefront for your Medusa Project

Sep 06, 2021 by

Vadim Smirnov

Vadim Smirnov

Learn how to set up an ecommerce store with Next.js starter and Medusa storefront with this quick and easy tutorial!
Medusa is a headless open source commerce platform giving engineers the foundation for building unique and scaleable digital commerce projects through our API-first engine.
Being headless, our starters serve as a good foundation for you to get coupled with a frontend in a matter of minutes.
This article assumes you already have the Medusa project created and ready to be linked to your Next.js starter.

Getting started

In order to get started let's 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 we have a storefront codebase that is ready to be used with our Medusa server.
Next, we have to complete two steps to make our new shiny storefront to speak with our server: link storefront to a server and update the
Copy to clipboard
Let's jump to these two.
For this part, we should navigate to a
Copy to clipboard
file which you can find in the utils folder.
We don't need to do much in here, but to make sure that our storefront is pointing to the port, where the server is running
import Medusa from '@medusajs/medusa-js';
const BACKEND_URL = process.env.GATSBY_STORE_URL || 'http://localhost:9000'; // <--- That is the line we are looking for
export const createClient = () => new Medusa({ baseUrl: BACKEND_URL });
By default the Medusa server is running at port 9000, so if you didn't change that we are good to go to our next step.

Update the
Copy to clipboard

Here let's navigate to your Medusa server and open
Copy to clipboard
Let's locate the
Copy to clipboard
variable and make sure it's the right port (which is 3000 by default for Next.js projects)
* CORS to avoid issues when consuming Medusa from a client.
* Should be pointing to the port where the storefront is running.
const STORE_CORS = process.env.STORE_CORS || 'http://localhost:3000';
Now we have a storefront that interacts with our Medusa server and with that we have a sweet and complete e-commerce setup with a Next.js storefront.

Learn more

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!
If you need help or have questions about how to use Medusa feel free to join our Discord to get direct access to our engineering team.

Share this post

Try Medusa

Spin up your environment in a few minutes.

Get started