Quickstart: Next.js Storefront
This document guides you to install and set up the Next.js Storefront for your Medusa Server.
info
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!
Prerequisites
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.
Installation
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
- Yarn
npm run dev
yarn run dev
Your Next.js storefront is now running at localhost:8000
!
Development Notes
Customization
To customize the pages of the storefront, you can customize the files under the pages
directory.
To customize the components used in the storefront, you can customize the files under the components
directory.
To customize the styles of the storefront, you can customize the styles
directory.
Change Port
By default, the Next.js storefront runs on port 8000
.
To change the port, change the develop
command in package.json
to the following:
"scripts": {
//other scripts
"dev": "next dev -p <PORT>"
}
Make sure to replace <PORT>
with the port number you want the storefront to run on. For example, 3000
.
Then, on your server, update the environment variable STORE_CORS
to the URL with the new port:
STORE_CORS=http://localhost:<PORT>
info
For more details about the Store CORS configuration, check out the Configure your Server documentation.
Development Resources
You can learn more about development with Next.js through their documentation.
Storefront Features
- View products and manage your cart.
- Full checkout workflow.
What’s Next 🚀
- Check the Storefront API reference for a full list of REST APIs to use on your storefront.
- Learn how to add Stripe as a payment provider.