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.
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.
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
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:
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
- Set the output directory of your deployed project to
- 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:
POSTGRES_URLto 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_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.