Next.js Starter Storefront

The Medusa application is made up of a Node.js server and an admin dashboard. The storefront is installed and hosted separately from the Medusa application. You have the flexibility to choose the frontend tech stack that you and your team are proficient in, and implement unique design systems and user experience.

Our Next.js Starter is a good place to start building your storefront. The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or build on top of it to tailor it for the business's unique use case, design, and customer experience.

Installation#

Approach 1: Install with Medusa Application#

If you don't have a Medusa application installed, run the following command to install both the Medusa application and the Next.js Starter storefront:

Terminal
❯npx create-medusa-app@latest --with-nextjs-starter

You'll be asked for the project's name, then the installation will start. The Medusa application will be installed in the {project-name} directory, and the Next.js will be installed in a separate {project-name}-storefront directory.

Once the installation is done, the Medusa Admin dashboard will open in your default browser at http://localhost:9000/app, and the Next.js Starter storefront will be running at http://localhost:8000.

For other information related to the Medusa application's installation, refer to this documentation.

Approach 2: Install separately#

If you already have a Medusa application installed with at least one region, you can install the Next.js Starter storefront with the following steps:

1. Clone the Next.js Starter:

Terminal
❯git clone https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

2. Change to the my-medusa-storefront directory, install the dependencies, and rename the template environment variable file:

npm
yarn
pnpm

3. Set the Medusa application's publishable API key in the NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY environment variable. You can retrieve the publishable API key in on the Medusa Admin dashboard by going to Settings -> Publishable API Keys

Terminal
❯NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_123...

4. While the Medusa application is running, start the Next.js Starter storefront:

npm
yarn
pnpm

Your Next.js Starter storefront is now running at http://localhost:8000.

Troubleshooting#

Payment Providers#

Stripe Integration#

The Next.js Starter storefront is compatible with Medusa's Stripe Module Provider.

In your Next.js Starter project, set the following environment variables for the Stripe integration:

Terminal
❯NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>

Where <YOUR_PUBLISHABLE_KEY> is your Stripe publishable key. You can retrieve it from your Stripe dashboard by going to Developers → API Keys.

Then, restart the Next.js Starter storefront. You can now use Stripe during checkout.

Change Medusa Application URL#

By default, the Medusa application runs at http://localhost:9000. This value is defined in your Next.js Starter storefront under the environment variable NEXT_PUBLIC_MEDUSA_BACKEND_URL.

To change the URL of the Medusa application in the storefront, set the NEXT_PUBLIC_MEDUSA_BACKEND_URL environment variable:

Terminal
❯NEXT_PUBLIC_MEDUSA_BACKEND_URL=https://example.com

Change Medusa Publishable API Key#

All requests made from a storefront must pass a publishable API key in the request's header. This API key is created in the Medusa application. If you've installed the Next.js Starter storefront using create-medusa-app, the publishable API key is set in the environment variables automatically.

If you change your Medusa application or its database, or you lose the publishable API key you had before, make sure to change the NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY environment variable to the new publishable API key:

Terminal
❯NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY=pk_123...