Quickstart: Next.js Storefront
This document guides you to install and set up the Next.js Storefront for your Medusa Server.
The Next.js storefront is meant as a starter storefront with basic features. We have an advanced Next.js storefront currently in the works with a better design and more functionalities coming soon!
This document assumes you already have a Medusa server installed. If you don’t, please follow the Quickstart guide for the Medusa server to learn how to do it.
1. Create a new Next.js project using the Medusa starter template:
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
2. Change to the newly created directory
my-medusa-storefront and rename the template environment variable file to use environment variables in development:
mv .env.template .env.local
3. Make sure the Medusa server is running, then run the local Next.js server:
npm run dev
yarn run dev
Your Next.js storefront is now running at
To customize the pages of the storefront, you can customize the files under the
To customize the components used in the storefront, you can customize the files under the
To customize the styles of the storefront, you can customize the
By default, the Next.js storefront runs on port
To change the port, change the
develop command in
package.json to the following:
"dev": "next dev -p <PORT>"
Make sure to replace
<PORT> with the port number you want the storefront to run on. For example,
Then, on your server, update the environment variable
STORE_CORS to the URL with the new port:
For more details about the Store CORS configuration, check out the Configure your Server documentation.
You can learn more about development with Next.js through their documentation.
- View products and manage your cart.
- Full checkout workflow.