import { DetailsList } from "docs-ui"
import CmaOptionTroubleshooting from "../troubleshooting/_sections/nextjs/cma-option.mdx"
import CorsErrorTroubleshooting from "../troubleshooting/_sections/other/cors-errors.mdx"
import ModuleXErrorTroubleshooting from "../troubleshooting/_sections/common-installation-errors/module-x-error.mdx"

export const metadata = {
  title: `Next.js Starter`,
}

# {metadata.title}

<Note type="soon">

Next.js starter is currently in development and doesn't fully support Medusa v2 yet.

</Note>

The Next.js Starter storefront provides rich commerce features and a sleek design. Developers and businesses can use it as-is or as a starting point to build a storefront for their Medusa application.

<Note type="check">

- [Node.js v18+](https://nodejs.org/en/download)
- At least one region in the Medusa application.

</Note>

## Installation

{/* TODO add when we support next.js starter in create-medusa-app v2 */}

{/* ### Option 1: Medusa Application + Next.js Starter

The `create-medusa-app` CLI tool accepts the `--with-nextjs-starter` option that installs the Next.js storefront along with the Medusa application:

```bash
npx create-medusa-app@latest --with-nextjs-starter
```

Refer to the [create-medusa-app reference](../create-medusa-app/page.mdx) for more details on prerequisites, steps, and troubleshooting. */}

{/* ### Option 2: Next.js Starter Only */}

{/* <Note type="check">

- At least one region in the Medusa application.

</Note> */}

1. Clone the `v2` branch of the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa):

```bash
git clone https://github.com/medusajs/nextjs-starter-medusa -b v2 my-medusa-storefront
```

2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable:

```bash npm2yarn
cd my-medusa-storefront
npm install
mv .env.template .env.local
```

3. While the Medusa application is running, start the Next.js storefront:

```bash npm2yarn
npm run dev
```

Your Next.js Starter Storefront is now running at `localhost:8000`.

---

## Troubleshooting

<DetailsList
  sections={[
    {
      title: "Next.js storefront not working using option 1",
      content: <CmaOptionTroubleshooting />
    },
    {
      title: "CORS Error",
      content: <CorsErrorTroubleshooting />
    },
    {
      title: `Resolve "Cannot find module X" Errors`,
      content: <ModuleXErrorTroubleshooting />
    }
  ]}
/>

## Payment Providers

The Next.js Starter storefront is compatible with Medusa's Stripe and PayPal plugins.

### Stripe Integration

<Note type="check">

- [Stripe provider module](../commerce-modules/payment/payment-provider/stripe/page.mdx) installed in the Medusa application.

</Note>

In your Next.js Starter project, set the following environment variables for the Stripe integration:

```bash
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
```

Where `<YOUR_PUBLISHABLE_KEY>` is your Stripe publishable key. You can retrieve it from your [Stripe dashboard](https://dashboard.stripe.com/) by going to Developers → API Keys.

Then, restart the Next.js Starter storefront. You can now use Stripe during checkout.

---

## Change Medusa Application URL

By default, the Medusa application runs at `http://localhost:9000`. This value is defined in your Next.js Starter storefront under the environment variable `NEXT_PUBLIC_MEDUSA_BACKEND_URL`.

To change the URL of the Medusa application in the storefront, set the `NEXT_PUBLIC_MEDUSA_BACKEND_URL` environment variable:

```bash
NEXT_PUBLIC_MEDUSA_BACKEND_URL=https://example.com
```