c08df5ac44
* docs: remove dev notices + fix AI assistant answer width * fix import * more notes removal * rc to latest
103 lines
2.9 KiB
Plaintext
103 lines
2.9 KiB
Plaintext
import { DetailsList, Prerequisites } 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}
|
|
|
|
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.
|
|
|
|
<Prerequisites items={[
|
|
{
|
|
text: "Node.js v20+",
|
|
link: "https://nodejs.org/en/download"
|
|
},
|
|
{
|
|
text: "At least one region in the Medusa application.",
|
|
},
|
|
]} />
|
|
|
|
## Installation
|
|
|
|
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
|
|
|
|
<Prerequisites items={[
|
|
{
|
|
text: "Stripe module provider installed in the Medusa application.",
|
|
link: "../commerce-modules/payment/payment-provider/stripe/page.mdx"
|
|
},
|
|
]} />
|
|
|
|
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
|
|
```
|