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

docs: add create-medusa-app option in Next.js starter (#5008)

Browse Source
This commit is contained in:
Shahed Nasser
2023-09-11 11:15:10 +03:00
committed by GitHub
parent 70701b3e8f
commit 5c9f8c7111
1 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
www/docs/content/starters/nextjs-medusa-starter.mdx
+36 -26
View File
@@ -11,7 +11,7 @@ import CorsErrorSection from '../troubleshooting/cors-issues.md'
# Next.js Quickstart
This document guides you to install and set up the Next.js Starter Template.
This document guides you to install and set up the Next.js Starter Storefront.
<!-- vale docs.We = NO -->
@@ -24,16 +24,16 @@ This document guides you to install and set up the Next.js Starter Template.
type: 'note'
}}
>
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js Starter Template or [building your own custom storefront](../storefront/roadmap.mdx).
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js Starter Storefront or [building your own custom storefront](../storefront/roadmap.mdx).
</QueryNote>
<!-- vale docs.We = YES -->
![Next.js Starter Template](https://res.cloudinary.com/dza7lstvk/image/upload/v1692197728/Medusa%20Docs/Screenshots/b9c5cqpbzfusid0tar9d.jpg)
![Next.js Starter Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1692197728/Medusa%20Docs/Screenshots/b9c5cqpbzfusid0tar9d.jpg)
## Instant Deployment to Vercel
Instead of manually following this guide to install then later deploy the Next.js Starter Template, you can deploy the Next.js Starter Template to Vercel with this button:
Instead of manually following this guide to install then later deploy the Next.js Starter Storefront, you can deploy the Next.js Starter Storefront to Vercel with this button:
<a
href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fmedusajs%2Fnextjs-starter-medusa.git&env=NEXT_PUBLIC_MEDUSA_BACKEND_URL&envDescription=URL%20of%20your%20Medusa%20Backend" class="img-url no-zoom-img">
@@ -44,15 +44,7 @@ Instead of manually following this guide to install then later deploy the Next.j
## Prerequisites
This document assumes you already have a Medusa backend installed. If you don’t, you can install the Medusa backend with the following command:
```bash
npx create-medusa-app@latest
```
Learn more about prerequisites of `create-medusa-app` and troubleshooting in [this guide](../create-medusa-app.mdx).
You should also have Node.js with v16 or greater installed. You can check your Node.js version with the following command:
Before following along with this guide, make sure you have v16 or greater of Node.js:
```bash noReport
node -v
@@ -62,9 +54,27 @@ You can install Node from the [official website](https://nodejs.org/en/).
---
## Installation
## Option 1: Install a Full Ecommerce Store
1\. Create a new Next.js project using the [Medusa starter template](https://github.com/medusajs/nextjs-starter-medusa):
The Next.js storefront requires a Medusa backend to be installed and running to work. The Medusa backend is a headless commerce engine, so storefronts connect to it using the Store REST APIs to provide commerce features to customers.
You can use the following command to install a full ecommerce store that includes the Medusa backend, Next.js storefront, and Medusa admin:
```bash
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.
---
## Option 2: Install Next.js Storefront Only
If you already have a Medusa backend installed, you can install the Next.js storefront separately.
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):
```bash
npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
@@ -83,7 +93,7 @@ mv .env.template .env.local
npm run dev
```
Your Next.js Starter Template is now running at `localhost:8000`
Your Next.js Starter Storefront is now running at `localhost:8000`
<Feedback
event="survey_nextjs_quickstart"
@@ -115,7 +125,7 @@ Your Next.js Starter Template is now running at `localhost:8000`
### Changing Medusa Backend URL
By default, the Medusa backend runs at `http://localhost:9000`. This value is defined in your Next.js starter template under the environment variable `NEXT_PUBLIC_MEDUSA_BACKEND_URL`.
By default, the Medusa backend runs at `http://localhost:9000`. This value is defined in your Next.js starter Storefront under the environment variable `NEXT_PUBLIC_MEDUSA_BACKEND_URL`.
If you need to change the URL of your Medusa backend because you changed the backend's default port or because you deployed your backend, change the value of `NEXT_PUBLIC_MEDUSA_BACKEND_URL` (typically in `.env.local`) to your backend URL. For example:
@@ -164,7 +174,7 @@ To opt out of using the product module, simply set the `productModule` feature f
### Toggle Search Engine Feature
The Next.js Starter Template by default is compatible with MeiliSearch.
The Next.js Starter Storefront by default is compatible with MeiliSearch.
To enable or disable the search engine, change the value of the feature in `store.config.json`:
@@ -182,7 +192,7 @@ Then, restart your Next.js backend. Depending on whether you enabled or disabled
If you have the search engine feature enabled, it is expected that you have installed the MeiliSearch plugin on your Medusa backend. If not, [follow this guide to install it](../plugins/search/meilisearch.md).
In your Next.js Starter Template, set the environment variables necessary for the MeiliSearch integration:
In your Next.js Starter Storefront, set the environment variables necessary for the MeiliSearch integration:
```json
NEXT_PUBLIC_SEARCH_ENDPOINT=<YOUR_MEILISEARCH_URL>
@@ -215,17 +225,17 @@ Then, restart the Next.js backend. You’ll be able to search through available
:::note
To make sure the Next.js Starter Template properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa backend at least the fields `title`, `handle`, `description`, and `thumbnail`.
To make sure the Next.js Starter Storefront properly displays the products in the search result, include in the `displayedAttributes` setting of the MeiliSearch plugin on the Medusa backend at least the fields `title`, `handle`, `description`, and `thumbnail`.
:::
![Search Result on Next.js Starter Template](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003191/Medusa%20Docs/Screenshots/gQVWvH2_h1ljig.png)
![Search Result on Next.js Starter Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003191/Medusa%20Docs/Screenshots/gQVWvH2_h1ljig.png)
### Algolia Integration
Instead of using the default MeiliSearch search engine, you can switch to using Algolia. Make sure you start by installing the Algolia plugin on your Medusa backend. You can do it by [following this guide](../plugins/search/algolia.md).
In your Next.js Starter Template, set the environment variables necessary for the Algolia integration:
In your Next.js Starter Storefront, set the environment variables necessary for the Algolia integration:
```bash
NEXT_PUBLIC_SEARCH_APP_ID=<YOUR_APP_ID>
@@ -254,13 +264,13 @@ export const SEARCH_INDEX_NAME =
Then, restart the Next.js backend. You’ll be able to search through available products by clicking the search icon in the navigation bar.
![Search Pop-up in Next.js Starter Template](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003205/Medusa%20Docs/Screenshots/ZLgX5Ad_po6a4n.png)
![Search Pop-up in Next.js Starter Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003205/Medusa%20Docs/Screenshots/ZLgX5Ad_po6a4n.png)
### Stripe Payment Integration
Stripe integration is supported by default. Make sure you have Stripe installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/stripe.mdx).
Then, in your Next.js Starter Template, set the environment variable necessary for the Stripe integration:
Then, in your Next.js Starter Storefront, set the environment variable necessary for the Stripe integration:
```bash
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
@@ -276,7 +286,7 @@ If you restart your Next.js backend you should be able to pay with Stripe on che
PayPal integration is supported by default. Make sure you have PayPal installed and enabled on your Medusa backend first. You can [follow this guide to learn how to install it](../plugins/payment/paypal.md).
Then, in your Next.js Starter Template, set the environment variable necessary for the PayPal integration:
Then, in your Next.js Starter Storefront, set the environment variable necessary for the PayPal integration:
```bash
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
@@ -298,7 +308,7 @@ To customize the styles of the storefront, you can customize the `src/styles` di
### Change Port
By default, the Next.js Starter Template runs on port `8000`.
By default, the Next.js Starter Storefront runs on port `8000`.
To change the port, change the `develop` command in `package.json` to the following: