Next.js Starter

The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or as a starting point to build a storefront for their Medusa application.

Prerequisites2

Node.js v20+↗At least one region in the Medusa application.

Installation#

1. Clone the v2 branch of the Next.js Starter:

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

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

npm
yarn
pnpm

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

npm
yarn
pnpm

Your Next.js Starter Storefront is now running at localhost:8000.

---

Troubleshooting#

Next.js storefront not working using option 1

CORS Error

Resolve "Cannot find module X" Errors

Payment Providers#

The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plugins.

Stripe Integration#

Prerequisites1

Stripe module provider installed in the Medusa application.↗

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

Edit this page