Medusa / NextJS

Medusa is a headless commerce engine that enables developers to create custom commerce experiences. It is designed to be flexible and customizable, allowing developers to build commerce experiences that meet their specific needs. It provides a really good integration with NextJS, a popular React framework for building web applications.

Medusa & NextJS versions

The template now support the following versions of Medusa: >=1.20 The template now support the following versions of NextJS: >=13.0

May works with other versions, but not tested.

Medusa installation

To use this template, you need to install Medusa from CLI first (without database initially, so reply no if you got any question about it). You can do it by following the official documentation

With NPM

dcmd toolbox start
npm install -g @medusajs/medusa-cli
medusa new my-medusa-project # name it as you want
mv my-medusa-project medusa # rename it to medusa (important or you'll have to change commands etc.)

Next installation

To use this template, you need to install Next first. You can do it by following the official documentation

With NextJS CLI

dcmd toolbox start # in the parent of your project folder
npm create next-app --typescript # name your project "next" to keep built-in commands working

Get the template

At root of your project (where the next and medusa folders are located), run the following command:

dcmd template get medusa

You should have this project structure :

my-project
├── .docker
├── medusa
└── next

Configure the template

In the .docker folder

• Create and configure the environnement file by copying the .env.example file to .env
• Set the name of your project in the docker-compose.yml file
• Set the right name for your virtual host in .docker/etc/apache/httpd-vhosts.conf

More information here : project configuration

Medusa configuration

You now need to configure Medusa to work with the template.

In the medusa folder, create a .env file and set the following variables :

# ... Other variables
DATABASE_TYPE="postgres"
DATABASE_URL=postgres://root:root@db:5432/default
REDIS_URL=redis://redis:6379

Also you need to set the following configuration to resolve the admin host and port :

  // medusa-config.js
  const plugins = [
  //...
    {
      resolve: `@medusajs/admin`,
      options: {
        develop: {
          port: 7001,
          host: '0.0.0.0'
        }
      },
    },
  //...
  ]

Initialize the project

At root of your project (where the package.json file is located), run the following command:

dcmd up

Start the project

In the next folder, run the following command:

dcmd next

In the medusa folder, run the following command:

dcmd medusa

Admin URL

You're good to go! You can now access your project at : http://admin.${PROJECT_NAME}.dev.local Or : http://localhost:7001

Backend URL

You're good to go! You can now access your project at : http://backend.${PROJECT_NAME}.dev.local Or : http://localhost:9000

Frontend URL

You're good to go! You can now access your project at : http://${PROJECT_NAME}.dev.local Or : http://localhost:3000