0462cc5acf
- Change existing data model guides and add new ones for DML - Change module's docs around service factory + remove guides that are now necessary - Hide/remove all mentions of module relationships, or label them as coming soon. - Change all data model creation snippets to use DML - use `property` instead of `field` when referring to a data model's properties. - Fix all snippets in commerce module guides to use new method suffix (no more main model methods) - Rework recipes, removing/hiding a lot of sections as a lot of recipes are incomplete with the current state of DML. ### Other changes - Highlight fixes in some guides - Remove feature flags guide - Fix code block styles when there are no line numbers. ### Upcoming changes in other PRs - Re-generate commerce module references (for the updates in the method names) - Ensure that the data model references are generated correctly for models using DML. - (probably at a very later point) revisit recipes
125 lines
3.5 KiB
Plaintext
125 lines
3.5 KiB
Plaintext
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
|
|
```
|