import RewritesError from "../../../troubleshooting/_sections/storefront/rewrites.mdx" import { Prerequisites, DetailsList } from "docs-ui"

export const metadata = { title: Deploy Next.js Starter Storefront to Vercel, }

{metadata.title}

In this guide, you’ll learn how to deploy the Next.js Starter Storefront to Vercel.

Cloud supports deploying storefronts alongside your Medusa application with zero-configuration.

Cloud is our managed services offering that makes deploying and operating Medusa applications possible without having to worry about configuring, scaling, and maintaining infrastructure. Cloud hosts your server, Admin dashboard, storefront, database, and Redis instance.

With Cloud, you maintain full customization control as you deploy your own modules and customizations directly from GitHub:

• Push to deploy.
• Multiple testing environments.
• Preview environments for new PRs.
• Test on production-like data.
• Storefront deployment.
• Emails setup.
• And more.

Sign up and learn more about Cloud.

<Prerequisites items={[ { text: "Storefront codebase hosted in a GitHub repository.", link: "../../../nextjs-starter/page.mdx" }, { text: "Deployed Medusa application with at least one region.", link: "../../page.mdx#medusa-application" }, ]} />

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

• build script:

npm run build

• install script:

npm install

• output directory: .next

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

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.

Find your generated domain name at Settings → Domains in your project’s dashboard.

Once you have your domain name:

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

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:

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

If you have multiple storefront URLs, separate them by commas in STORE_CORS

And add the URL to AUTH_CORS's value:

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.

<DetailsList sections={[ { title: "Login Page Error", content: <RewritesError /> } ]} />