General Deployment Guide for Next.js Starter

In this guide, you’ll learn the general steps to follow when deploying the Next.js starter storefront. This guide isn’t tailored towards any hosting provider.

Prerequisites

Deployed Medusa Backend

The deployed storefront must connect to a publicly deployed backend. So, deploy the backend first to obtain its URL.

You can follow one of these backend deployment guides.

Installed Storefront

You must have an installed Next.js storefront before proceeding with the deployment. You can refer to this installation guide.

---

Step 1: Storefront Preparations

If you're not using the Serverless Modules in your storefront, either delete the src/app/api directory or exclude it in .gitignore.

Otherwise, the deployment may fail.

---

(Optional) Step 2: Create GitHub Repository

Many hosting providers allow you to deploy your project directly from GitHub. This makes it easier for you to push changes and updates without having to manually trigger the update in the hosting provider.

If your hosting provider supports that, create a GitHub repository and push the Next.js starter’s code:

git init
git remote add origin <GITHUB_URL>
git add .
git commit -m "initial commit"
git push

---

Step 3: Deploy to Hosting Provider

The steps to deploy the Next.js starter can be different based on the hosting provider you use. The following points cover common configurations across hosting providers:

• If your hosting provider supports choosing a framework preset, set it to Next.js. You can then skip setting the build command and output directory as they are default Next.js configurations.
• Set the build command of your deployed project to the build command:

• npm
• Yarn
• pnpm

npm run build

yarn build

pnpm run build

• Set the output directory of your deployed project to .next.
• Add the following environment variables:
  • NEXT_PUBLIC_MEDUSA_BACKEND_URL: The URL of your deployed Medusa backend.
  • NEXT_PUBLIC_BASE_URL: The URL of the storefront. If you still don’t have the URL you can wait until later to add it. However, you may face errors when using the storefront.
  • REVALIDATE_SECRET: A secret used for revalidating data. Learn more in the Next.js documentation.
  • If you’re using serverless modules:
    • Set MEDUSA_FF_MEDUSA_V2 to true.
    • Set POSTGRES_URL to the connection URL of the PostgreSQL database.

---

Step 4: Configure CORS on the Deployed Backend

To send requests from the Next.js starter storefront to the Medusa backend, you must set the STORE_CORS environment variable on your backend to the storefront’s URL:

STORE_CORS=<STORE_URL>

Where <STORE_URL> is the URL of your Next.js starter storefront that you just deployed.

Then, restart your Medusa backend. Once the backend is running again, you can use your storefront.

---

Troubleshooting

CORS Error