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.

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
  1. Change to the my-medusa-storefront directory, install the dependencies, and rename the template environment variable:
  1. While the Medusa application is running, start the Next.js storefront:

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#

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
Was this page helpful?
Edit this page