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

docs: change naming of Next.js starter (#4494)

Browse Source
This commit is contained in:
Shahed Nasser
2023-07-11 11:35:08 +03:00
committed by GitHub
parent 4b4296dc16
commit fbece1d27e
39 changed files with 97 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/content/starters/nextjs-medusa-starter.mdx
View File

@@ -1,5 +1,5 @@
---
description: 'Learn how to install the Next.js starter storefront to use with Medusa. The Next.js storefront includes ready-integrations with plugins like Stripe and Algolia. It offers features like customer accounts, cart and checkout flows, and more.'
description: 'Learn how to install the Next.js Starter Template to use with Medusa. The Next.js Starter Template includes ready-integrations with plugins like Stripe and Algolia. It offers features like customer accounts, cart and checkout flows, and more.'
---
import Feedback from '@site/src/components/Feedback';
@@ -8,9 +8,9 @@ import Troubleshooting from '@site/src/components/Troubleshooting'
import ModuleXErrorSection from '../troubleshooting/common-installation-errors/_module-x-error.mdx'
import CorsErrorSection from '../troubleshooting/cors-issues.md'
# Next.js Storefront Quickstart
# Next.js Starter Template Quickstart
This document guides you to install and set up the Next.js Starter Storefront.
This document guides you to install and set up the Next.js Starter Template.
<!-- vale docs.We = NO -->
@@ -23,16 +23,16 @@ This document guides you to install and set up the Next.js Starter Storefront.
type: 'note'
}}
>
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js storefront or building your own custom storefront.
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).
</QueryNote>
<!-- vale docs.We = YES -->
![Next.js Storefront Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003177/Medusa%20Docs/Screenshots/koJl8uR_n3gvii.gif)
![Next.js Starter Template Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003177/Medusa%20Docs/Screenshots/koJl8uR_n3gvii.gif)
## Instant Deployment to Vercel
Instead of manually following this guide to install then later deploy the Next.js Storefront, you can deploy the Next.js Storefront to Vercel with this button:
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:
<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">
@@ -76,7 +76,7 @@ mv .env.template .env.local
npm run dev
```
Your Next.js storefront is now running at `localhost:8000`
Your Next.js Starter Template is now running at `localhost:8000`
<Feedback
event="survey_nextjs_quickstart"
@@ -108,7 +108,7 @@ Your Next.js storefront is now running at `localhost:8000`
### Toggle Search Engine Feature
The Next.js storefront by default is compatible with MeiliSearch.
The Next.js Starter Template by default is compatible with MeiliSearch.
To enable or disable the search engine, change the value of the feature in `store.config.json`:
@@ -126,7 +126,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 storefront, set the environment variables necessary for the MeiliSearch integration:
In your Next.js Starter Template, set the environment variables necessary for the MeiliSearch integration:
```json
NEXT_PUBLIC_SEARCH_ENDPOINT=<YOUR_MEILISEARCH_URL>
@@ -159,17 +159,17 @@ Then, restart the Next.js backend. You’ll be able to search through available
:::note
To make sure the Next.js 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`.
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`.
:::
![Search Result on Next.js storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003191/Medusa%20Docs/Screenshots/gQVWvH2_h1ljig.png)
![Search Result on Next.js Starter Template](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 storefront, set the environment variables necessary for the Algolia integration:
In your Next.js Starter Template, set the environment variables necessary for the Algolia integration:
```bash
NEXT_PUBLIC_SEARCH_APP_ID=<YOUR_APP_ID>
@@ -198,13 +198,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 Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003205/Medusa%20Docs/Screenshots/ZLgX5Ad_po6a4n.png)
![Search Pop-up in Next.js Starter Template](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 storefront, set the environment variable necessary for the Stripe integration:
Then, in your Next.js Starter Template, set the environment variable necessary for the Stripe integration:
```bash
NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
@@ -220,7 +220,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 storefront, set the environment variable necessary for the PayPal integration:
Then, in your Next.js Starter Template, set the environment variable necessary for the PayPal integration:
```bash
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
@@ -242,7 +242,7 @@ To customize the styles of the storefront, you can customize the `src/styles` di
### Change Port
By default, the Next.js storefront runs on port `8000`.
By default, the Next.js Starter Template runs on port `8000`.
To change the port, change the `develop` command in `package.json` to the following: