Deploy Medusa Next.js to Vercel

In this document, you’ll learn how to deploy the Next.js storefront to Vercel.

1. Create Vercel Project#

On your Vercel dashboard:

1. Click on the Add New button at the top right.
2. Choose Project from the dropdown.
3. In the list of repositories, click on the Import button of the storefront’s repository.

This opens a form to configure your project.

Configure Storefront Project#

In the Configure Project form, choose Next.js for the Framework Preset field. This sets for you the build and install scripts, and the output directory

Then, expand the Environment Variables section and add the following variables:

Terminal
❯MEDUSA_BACKEND_URL= # URL of Medusa application❯NEXT_PUBLIC_DEFAULT_REGION=us # or a different region that you prefer❯NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY= # publishable API key of the storefront's sales channel❯REVALIDATE_SECRET=supersecret # TODO generate random string

Where:

1. MEDUSA_BACKEND_URL is the URL of your deployed Medusa application
2. NEXT_PUBLIC_DEFAULT_REGION is the country code of a region to be used by default, if the customer hasn’t selected a region.
3. NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY is the publishable API key of the storefront. You can create one or find the default one in the Medusa Admin dashboard.
4. REVALIDATE_SECRET is a random string for Next.js revalidation.

Make sure to add other relevant environment variables. For example, if you’re using the Stripe Payment Module Provider in the Medusa application, add the NEXT_PUBLIC_STRIPE_KEY environment variable.

Deploy Application#

Click the Deploy button when you’re done. The deployment will take a few minutes.

Once the deployment is done, there’s still more work to do before you can use the storefront. Click on the Continue to Dashboard button to go to the project’s dashboard.

2. Set Storefront URL#

Vercel generates a random domain name for your project. You can use it or set a custom domain name.

Once you have your domain name:

1. Go to Settings → Environment Variables
2. Add a new environment variable:

Terminal
❯NEXT_PUBLIC_BASE_URL=https://nextjs-storefront...

Set the value to the storefront’s URL.

Set STORE_CORS and AUTH_CORS in Deployed Medusa Application#

You must also set the STORE_CORS environment variable in your Medusa application to the storefront’s URL:

Terminal
❯STORE_CORS=https://nextjs-storefront...

And add the URL to AUTH_CORS's value:

Terminal
❯AUTH_CORS=<OTHER_URLS>,https://nextjs-storefront...

Where <OTHER_URLS> are other storefront or admin URLs added previously to AUTH_CORS.

Redeploy Storefront#

Once the environment variables changes are deployed in the Medusa application, do the following to redeploy the storefront:

1. Go to Deployments in the storefront Vercel project.
2. Find the last production deployment, and click on the three dots icon at the right.
3. Choose Redeploy from the dropdown, and confirm redeployment in the new window.

Test the Deployed Storefront#

Once the redeployment is done, test out the storefront by going to its URL. Try to browse the products or place an order to ensure everything is working as expected.

Troubleshooting#

If you’re running into issues in your storefront, find the logs in your Vercel project’s dashboard under the Logs tab.