---
description: "General steps for deploying the Next.js starter."
addHowToData: true
---

import DetailsList from '@site/src/components/DetailsList'
import CorsErrorSection from '../../troubleshooting/cors-issues.md'

# 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](../server/index.mdx).

### Installed Storefront

You must have an installed Next.js storefront before proceeding with the deployment. You can refer to [this installation guide](../../starters/nextjs-medusa-starter.mdx).

---

## Step 1: Storefront Preparations

If you're not using the [Serverless Modules](../../starters/nextjs-medusa-starter.mdx#using-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:

```bash
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:

```bash npm2yarn
npm 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](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
    - 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:

```bash
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

<DetailsList
  sections={[
    {
      title: 'CORS Error',
      content: <CorsErrorSection />
    },
  ]}
/>