asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: update next.js starter docs (#6378)

Browse Source 
* docs: update next.js starter docs

* added empty changeset
This commit is contained in:
Shahed Nasser
2024-02-12 15:10:08 +02:00
committed by GitHub
parent 1fd0457c15
commit bc2a63782b
3 changed files with 30 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
www/apps/docs/content/starters/nextjs-medusa-starter.mdx
View File

@@ -4,10 +4,10 @@ description: 'Learn how to get started with a Next.js storefront and Medusa. The
---
import Feedback from '@site/src/components/Feedback';
import QueryNote from '@site/src/components/QueryNote';
import DetailsList from '@site/src/components/DetailsList'
import ModuleXErrorSection from '../troubleshooting/common-installation-errors/_module-x-error.mdx'
import CorsErrorSection from '../troubleshooting/cors-issues.md'
import CmaOptionSection from '../troubleshooting/nextjs/_cma-option.mdx'
# Next.js Quickstart
@@ -45,32 +45,18 @@ npx create-medusa-app@latest --with-nextjs-starter
Refer to the [create-medusa-app](../create-medusa-app.mdx) documentation for more details on prerequisites, steps, and troubleshooting.
### Troubleshooting: Next.js Storefront Not Working
By default, the command above will start both the Medusa backend at `localhost:9000` and the Next.js storefront at `localhost:8000` once the installation finishes successfully. The Medusa admin will also open in your default browser.
If, while following along the setup process, you try to access the Next.js storefront and it's not working, try to run the storefront manually while the Medusa backend is still running.
To do that, first, change to the directory of the storefront. The directory name is `<PROJECT_NAME>-storefront`, where `<PROJECT_NAME>` is the name you chose for the project while running the `create-medusa-app` command. For example:
```bash
cd my-medusa-store-storefront
```
Then, run the following command to start the storefront:
```bash npm2yarn
npm run dev
```
The storefront should run on `localhost:8000` now.
---
## Option 2: Install Next.js Storefront Only
If you already have a Medusa backend installed, you can install the Next.js storefront separately.
:::warning
Your backend must have at least one active region. Otherwise, the Next.js storefront will be stuck in a redirect loop.
:::
To do that, follow these steps:
1\. Create a new Next.js project using the [Medusa starter Storefront](https://github.com/medusajs/nextjs-starter-medusa):
@@ -107,6 +93,10 @@ Your Next.js Starter Storefront is now running at `localhost:8000`
<DetailsList
sections={[
{
title: "Next.js storefront not working using option 1",
content: <CmaOptionSection />
},
{
title: 'CORS Error',
content: <CorsErrorSection />
@@ -332,56 +322,6 @@ Then, on your backend, update the environment variable `STORE_CORS` to the URL w
STORE_CORS=http://localhost:<PORT>
```
### Using Serverless Modules
:::note
Serverless Modules are currently in beta and, at the moment, they can't be used in the Next.js storefront without the Medusa backend running.
:::
This starter fully supports the experimental [Product](../experimental/product/overview.mdx) and [Pricing](../experimental/pricing/overview.mdx) modules for retrieving and manipulating product and pricing data directly from a serverless function. This keeps your logic close to the frontend, making it easy to customize or extend Medusa's core functionality from within your Next.js project.
By default, this starter uses the standard Medusa API for product, collection, and pricing retrieval.
To enable the usage of the experimental modules, first, set the following environment variables:
- `POSTGRES_URL`: the URL of your PostgreSQL databsae.
- `NEXT_PUBLIC_BASE_URL`: the URL of your storefront's base URL. For exmaple, if you're running it locally, it should be `http://localhost:8000`.
Then, set the following environment variable in both the Next.js storefront and the [Medusa backend](../experimental/index.md#enabling-experimental-features):
:::warning
This is a one way process. Once you opt in to these features and update your database, there's no way back. Proceed with caution.
:::
```bash
MEDUSA_FF_MEDUSA_V2=true
```
Finally, run migrations in your Medusa backend using the following commands:
```bash
npx medusa migrations run
node node_modules/@medusajs/medusa/dist/scripts/migrate-to-pricing-module.js
```
You can now test it out now. Make sure the Medusa backend is running, then start (or restart) your Next.js storefront:
```bash npm2yarn
npm run start
```
If you go to `localhost:8000`, all product and collection data should now be coming from the module. The Product Module routes are all in the `src/app/api` directory for you to customize to your use case.
:::info[Deploying to Vercel]
If you're not planning on using the serverless modules, you might encounter errors when deploying to Vercel. You can safely delete or exclude `the src/app/api` folder before deploying. The API routes are only used by the serverless modules.
:::
### Customization
To customize the pages of the storefront, you can customize the files under the `src/app` directory.

17
www/apps/docs/content/troubleshooting/nextjs/_cma-option.mdx Normal file
View File

@@ -0,0 +1,17 @@
By default, passing the `--with-nextjs-starter` to the `create-medusa-app` command starts both the Medusa backend at `localhost:9000` and the Next.js storefront at `localhost:8000` once the installation finishes successfully. The Medusa admin also opens in your default browser.
If, while following along the setup process, you try to access the Next.js storefront and it's not working, try to run the storefront manually while the Medusa backend is still running.
To do that, first, change to the directory of the storefront. The directory name is `<PROJECT_NAME>-storefront`, where `<PROJECT_NAME>` is the name you chose for the project while running the `create-medusa-app` command. For example:
```bash
cd my-medusa-store-storefront
```
Then, run the following command to start the storefront:
```bash npm2yarn
npm run dev
```
The storefront should run on `localhost:8000` now.