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

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

View File

@@ -6,11 +6,11 @@ addHowToData: true
import Troubleshooting from '@site/src/components/Troubleshooting'
import CorsErrorSection from '../../troubleshooting/cors-issues.md'
# Deploy Next.js Storefront on Vercel
# Deploy Next.js Starter Template on Vercel
In this document, youll learn how to deploy the Next.js Storefront on Vercel.
In this document, youll learn how to deploy the Next.js Starter Template on Vercel.
Alternatively, you can directly deploy the Next.js storefront to Vercel with this button.
Alternatively, you can directly 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">
@@ -21,9 +21,9 @@ Alternatively, you can directly deploy the Next.js storefront to Vercel with thi
### Medusa Components
It is assumed you already have installed the Next.js storefront locally. If not, please follow along with [this guide](../../starters/nextjs-medusa-starter.mdx) instead.
It is assumed you already have installed the Next.js Starter Template locally. If not, please follow along with [this guide](../../starters/nextjs-medusa-starter.mdx) instead.
Its also assumed you already have the Medusa backend deployed, which the Next.js storefront interacts with. If not, you can check out one of the [deployment documentation related to the Medusa backend](../server/index.mdx).
Its also assumed you already have the Medusa backend deployed, which the Next.js Starter Template interacts with. If not, you can check out one of the [deployment documentation related to the Medusa backend](../server/index.mdx).
### Required Accounts
@@ -50,7 +50,7 @@ This step is only required if youre deploying from the Vercel website. Howeve
:::
Before you can deploy your Next.js storefront, you need to create a GitHub repository and push the code base to it. To do that:
Before you can deploy your Next.js Starter Template, you need to create a GitHub repository and push the code base to it. To do that:
1. On GitHub, click the plus icon at the top right, then click New Repository.
2. Youll then be redirected to a new page with a form. In the form, enter the Repository Name.
@@ -62,7 +62,7 @@ The next step is to push the code to the GitHub repository you just created.
After creating the repository, youll be redirected to the repositorys page. On that page, you should see a URL that you can copy to connect your repository to a local directory.
Copy the link. Then, open your terminal in the directory that holds your Next.js storefront codebase and run the following commands:
Copy the link. Then, open your terminal in the directory that holds your Next.js Starter Template codebase and run the following commands:
```bash
git init
@@ -94,7 +94,7 @@ This section explains how to deploy the storefront using the Vercel website:
1. Open the [Vercel dashboard](https://vercel.com/dashboard) after logging in.
2. Click on the “Add New…” button next to the search bar.
3. Choose Project from the dropdown.
4. In the new page that opens, find the Git repository that holds your Next.js storefront and click on the Import button. If you havent connected your Vercel account to any Git provider, you must do that first.
4. In the new page that opens, find the Git repository that holds your Next.js Starter Template and click on the Import button. If you havent connected your Vercel account to any Git provider, you must do that first.
5. In the Configure Project form:
1. Open the Environment Variables collapsible, and add an environment variable with the name `NEXT_PUBLIC_MEDUSA_BACKEND_URL` and the value being the URL to your deployed Medusa Backend.
2. You can optionally edit the Project Name.
@@ -138,11 +138,11 @@ At this point, when you visit the storefront, you will face errors related to Cr
## Step 3: Configure CORS on the Medusa Backend
To send requests to the Medusa backend from the Next.js storefront, you must set the `STORE_CORS` environment variable on your backend to the Next.js storefronts URL.
To send requests to the Medusa backend from the Next.js Starter Template, you must set the `STORE_CORS` environment variable on your backend to the Next.js Starter Templates URL.
:::tip
If you want to set a custom domain to your Next.js storefront website on Vercel, make sure to do it before this step. You can refer to this guide on [Vercels documentation](https://vercel.com/docs/concepts/projects/domains/add-a-domain).
If you want to set a custom domain to your Next.js Starter Template website on Vercel, make sure to do it before this step. You can refer to this guide on [Vercels documentation](https://vercel.com/docs/concepts/projects/domains/add-a-domain).
:::
@@ -152,9 +152,9 @@ On your Medusa backend, add the following environment variable:
STORE_CORS=<STOREFRONT_URL>
```
Where `<STOREFRONT_URL>` is the URL of your Next.js storefront that you just deployed.
Where `<STOREFRONT_URL>` is the URL of your Next.js Starter Template that you just deployed.
Then, restart your Medusa backend. Once the backend is running again, you can use your Next.js storefront.
Then, restart your Medusa backend. Once the backend is running again, you can use your Next.js Starter Template.
---

View File

@@ -313,7 +313,7 @@ Try now to place an order either using the [REST APIs](/api/store) or using the
:::tip
If you dont have a storefront installed you can get started with the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront in minutes.
If you dont have a storefront installed you can get started with the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx) in minutes.
:::

View File

@@ -126,10 +126,10 @@ Medusa provides the essential building blocks that developers can put together t
{
type: 'link',
href: '/starters/nextjs-medusa-starter',
label: 'Next.js Storefront Quickstart',
label: 'Next.js Starter Template',
customProps: {
icon: Icons['nextjs'],
description: 'Install the Next.js starter storefront and use it with the Medusa backend.'
description: 'Install the Next.js starter template and use it as the storefront for the Medusa backend.'
}
},
]} />

View File

@@ -30,7 +30,7 @@ This document does not cover implementing the checkout flow. You can refer to [t
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -30,7 +30,7 @@ Its recommended to go through the [Shipping Architecture Overview](../shippin
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -38,7 +38,7 @@ You can use Medusas Store APIs to achieve more functionalities as well. Check
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -34,7 +34,7 @@ You want to implement discount functionality in your store to allow customers to
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -30,7 +30,7 @@ You want to implement the following features in a storefront:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -35,7 +35,7 @@ Refunding the customer is handled by admins. You can learn how to implement or u
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -30,7 +30,7 @@ The process of creating a swap is as follows:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -48,7 +48,7 @@ You can perform other functionalities related to order editing. To learn more, c
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -45,7 +45,7 @@ In this document, youll learn how to implement two parts of this flow:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -16,7 +16,7 @@ In this document, youll learn the different ways you can retrieve and view a
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -135,7 +135,7 @@ For zero-decimal currencies, the amount is still stored as an integer without mu
This logic of formatting the price is not handled in the backend. So, when you add a product variant using the Admin APIs, you must format the price as explained earlier. The backend stores the price as received from API requests.
In addition, the Medusa admin dashboard and the Next.js storefront expect the price to be of that format, so when prices are displayed for currencies that are stored multiplied by a `100`, such as USD, theyre divided by a hundred. Also, when you add or update a product variant, its price is sent to the Medusa backend as the price multiplied by a hundred.
In addition, the Medusa admin dashboard and the Next.js Starter Template expect the price to be of that format, so when prices are displayed for currencies that are stored multiplied by a `100`, such as USD, theyre divided by a hundred. Also, when you add or update a product variant, its price is sent to the Medusa backend as the price multiplied by a hundred.
### Displaying the Product Variants Price

View File

@@ -32,7 +32,7 @@ You want to add or use the following storefront functionalities:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -29,7 +29,7 @@ You want to add or use the following store functionalities:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow the [quickstart guide](../../../development/backend/install.mdx) to get started.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -30,7 +30,7 @@ You want to implement the following in your storefront:
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -33,7 +33,7 @@ An alternative approach is to use Publishable API keys. You can learn how to use
It's assumed that you already have a Medusa backend installed and set up. If not, you can follow our [quickstart guide](../../../development/backend/install.mdx) to get started.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusas storefronts. If you dont have a storefront set up, you can install the [Next.js Starter Template](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

View File

@@ -133,7 +133,7 @@ Run your backend with the following command:
npx @medusajs/medusa-cli develop
```
Then, try triggering one of the [mentioned events earlier in this document](#events-that-the-segment-plugin-tracks). For example, you can place an order either using the [REST APIs](https://docs.medusajs.com/api/store) or using the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx).
Then, try triggering one of the [mentioned events earlier in this document](#events-that-the-segment-plugin-tracks). For example, you can place an order either using the [REST APIs](https://docs.medusajs.com/api/store) or using the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx).
After you place an order, on the Segment source that you created, click on the Debugger tab. You should see at least one event triggered for each order you place. If you click on the event, you can see the order details are passed to the event.

View File

@@ -9,7 +9,7 @@ In this document, youll learn how to customize the Contentful integration wit
:::warning
This guide covers how to customize the Gatsby storefront which is now deprecated. It's recommended to integrate Contentful into either the Next.js storefront or your custom storefront.
This guide covers how to customize the Gatsby storefront which is now deprecated. It's recommended to integrate Contentful into either the Next.js Starter Template or your custom storefront.
:::

View File

@@ -227,7 +227,7 @@ To do that:
:::warning
This Gatsby storefront is deprecated. It's recommended to integrate Contentful into either the Next.js storefront or your custom storefront.
This Gatsby storefront is deprecated. It's recommended to integrate Contentful into either the Next.js Starter Template or your custom storefront.
:::

View File

@@ -72,9 +72,9 @@ The files will be stored under the `upload_dir` specified in the plugin options
---
## Next.js Storefront Configuration
## Next.js Starter Template Configuration
If youre using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the backend's domain name into the configured images domain names. This is because all URLs of product images will be from the Medusa backend.
If youre using a [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx), you need to add an additional configuration that adds the backend's domain name into the configured images domain names. This is because all URLs of product images will be from the Medusa backend.
If this configuration is not added, youll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).

View File

@@ -193,9 +193,9 @@ const plugins = [
---
## Next.js Storefront Configuration
## Next.js Starter Template Configuration
If youre using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the MinIO domain name into the configured images domain names. This is because all URLs of product images will be from the MinIO backend.
If youre using a [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx), you need to add an additional configuration that adds the MinIO domain name into the configured images domain names. This is because all URLs of product images will be from the MinIO backend.
If this configuration is not added, youll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).

View File

@@ -195,9 +195,9 @@ You can also check that the image was uploaded on the S3 buckets page.
---
## Next.js Storefront Configuration
## Next.js Starter Template Configuration
If youre using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the S3 bucket domain name into the configured images domain names. This is because all URLs of product images will be from the S3 bucket.
If youre using a [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx), you need to add an additional configuration that adds the S3 bucket domain name into the configured images domain names. This is because all URLs of product images will be from the S3 bucket.
If this configuration is not added, youll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).
@@ -238,6 +238,6 @@ Where `<BUCKET_NAME>` is the name of the S3 bucket youre using.
## See Also
- Check out [more plugins](../overview.mdx) you can add to your store.
- Check out [more plugins](../overview.mdx) you can add to your store
- [Deploy the Medusa backend](../../deployments/server/index.mdx)
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.
- Install the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx)

View File

@@ -152,9 +152,9 @@ You can also check that the image was uploaded on the Spaces page.
---
## Next.js Storefront Configuration
## Next.js Starter Template Configuration
If youre using a [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront, you need to add an additional configuration that adds the Spaces domain name into the configured images domain names. This is because all URLs of product images will be from the Space.
If youre using a [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx), you need to add an additional configuration that adds the Spaces domain name into the configured images domain names. This is because all URLs of product images will be from the Space.
If this configuration is not added, youll receive the error ["next/image Un-configured Host”](https://nextjs.org/docs/messages/next-image-unconfigured-host).
@@ -182,6 +182,6 @@ Where `<YOUR_SPACE_DOMAIN>` is the domain name for your Space which can be retri
## See Also
- Check out [more plugins](../overview.mdx) you can add to your store.
- [Deploy the Medusa backend on DigitalOcean](../../deployments/server/deploying-on-digital-ocean.md).
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.
- Check out [more plugins](../overview.mdx) you can add to your store
- [Deploy the Medusa backend on DigitalOcean](../../deployments/server/deploying-on-digital-ocean.md)
- Install the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx)

View File

@@ -3969,7 +3969,7 @@ To test it out, perform an action that would trigger one of the emails being sen
:::tip
If you dont have a storefront installed, check out the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.
If you dont have a storefront installed, check out the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx).
:::

View File

@@ -103,4 +103,4 @@ Thats all you need to do to integrate Slack into Medusa!
## See Also
- Install [Medusa's Admin](../../admin/quickstart.mdx) for the full order-management experience.
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.
- Install the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx).

View File

@@ -127,7 +127,7 @@ If you create an order now on your storefront, you should receive a message from
:::tip
If you dont have a storefront set up yet, you can install the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx).
If you dont have a storefront set up yet, you can install the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx).
:::

View File

@@ -109,7 +109,7 @@ All storefronts require that you obtain your PayPal Client ID. You can retrieve
### Process Overview
Aside from the Next.js Storefront, you need to add the implementation with PayPal manually.
Aside from the Next.js Starter Template, you need to add the implementation with PayPal manually.
:::note
@@ -130,9 +130,9 @@ In Medusa, by default, payments are authorized during checkout, but the payment
:::
### Add to Next.js Storefront
### Add to Next.js Starter Template
Medusa has a Next.js storefront that you can easily use with your Medusa backend. If you dont have the storefront installed, you can follow [this quickstart guide](../../starters/nextjs-medusa-starter.mdx).
Medusa has a Next.js Starter Template that you can easily use with your Medusa backend. If you dont have the storefront installed, you can follow [this quickstart guide](../../starters/nextjs-medusa-starter.mdx).
In your `.env.local` file (or the file youre using for your environment variables), add the following variable:

View File

@@ -139,9 +139,9 @@ This guide will take you through how to set up Stripe payments in your Medusa st
All storefronts require that you obtain your Stripes Publishable Key. You can retrieve it from your Stripes developer dashboard by choosing API Keys and then copying the Publishable Key.
### Add to Next.js Storefront
### Add to Next.js Starter Template
Medusa has a Next.js storefront that you can easily use with your Medusa backend. If you dont have the storefront installed, you can follow [this quickstart guide](../../starters/nextjs-medusa-starter).
Medusa has a Next.js Starter Template that you can easily use with your Medusa backend. If you dont have the storefront installed, you can follow [this quickstart guide](../../starters/nextjs-medusa-starter).
In your `.env.local` file (or the file youre using for your environment variables), add the following variable:

View File

@@ -225,7 +225,7 @@ This feature is only available if you have an event module installed in your Med
## Add Search to your Storefront
In this section, youll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusas [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks.
In this section, youll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusas [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx) as well as React-based frameworks.
### Storefront Prerequisites
@@ -233,13 +233,13 @@ It is assumed you already have a storefront set up and working with the Medusa b
:::tip
If you dont have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
If you dont have a storefront set up, you can use the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
:::
### Add to Next.js Storefront
### Add to Next.js Starter Template
The Next.js storefront has the Algolia integration available out of the box. To get it working, you just need to follow three steps.
The Next.js Starter Template has the Algolia integration available out of the box. To get it working, you just need to follow three steps.
First, ensure that the search feature is enabled in `store.config.json`:
@@ -277,15 +277,15 @@ export const SEARCH_INDEX_NAME =
process.env.NEXT_PUBLIC_INDEX_NAME || "products"
```
If you run your Next.js storefront now while the Medusa backend is running, the search functionality will be available in your storefront.
If you run your Next.js Starter Template now while the Medusa backend is running, the search functionality will be available in your storefront.
:::note
To make sure the Next.js storefront properly displays the products in the search result, include in the `attributesToRetrieve` setting of the Algolia 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 `attributesToRetrieve` setting of the Algolia plugin on the Medusa backend at least the fields `title`, `handle`, `description`, and `thumbnail`.
:::
![Search pop up in the Next.js storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000082/Medusa%20Docs/Algolia/1f9qqK6_c0z8zi.png)
![Search pop up in the Next.js Starter Template](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000082/Medusa%20Docs/Algolia/1f9qqK6_c0z8zi.png)
### Add to Other Storefronts

View File

@@ -186,7 +186,7 @@ This feature is only available if you have an event module installed in your Med
## Add Search to your Storefront
In this section, youll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusas [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks.
In this section, youll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusas [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx) as well as React-based frameworks.
### Storefront Prerequisites
@@ -194,7 +194,7 @@ It is assumed you already have a storefront set up and working with the Medusa b
:::tip
If you dont have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
If you dont have a storefront set up, you can use the [Next.js Starter Template](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
:::
@@ -217,9 +217,9 @@ Make sure to replace `<MEILISEARCH_HOST>` and `<MEILISEARCH_MASTER_KEY>` accordi
If this request is successful, the API key will be available under the `key` property returned in the JSON response.
### Add to Next.js Storefront
### Add to Next.js Starter Template
The Next.js storefront has the MeiliSearch integration available out of the box. To get it working, you just need to follow two steps.
The Next.js Starter Template has the MeiliSearch integration available out of the box. To get it working, you just need to follow two steps.
First, ensure that the search feature is enabled in `store.config.json`:
@@ -241,15 +241,15 @@ NEXT_PUBLIC_SEARCH_INDEX_NAME=products
Make sure to replace `<YOUR_MEILISEARCH_HOST>` with your MeiliSearch host and `<YOUR_API_KEY>` with the API key you created as instructed in the [Storefront Prerequisites](#storefront-prerequisites) section.
If you run your Next.js storefront now while the Medusa backend and the MeiliSearch services are running, the search functionality will be available in your storefront.
If you run your Next.js Starter Template now while the Medusa backend and the MeiliSearch services are running, the search functionality will be available in your storefront.
:::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/v1668000298/Medusa%20Docs/MeiliSearch/gQVWvH2_datei5.png)
![Search Result on Next.js Starter Template](https://res.cloudinary.com/dza7lstvk/image/upload/v1668000298/Medusa%20Docs/MeiliSearch/gQVWvH2_datei5.png)
### Add to Other Storefronts

View File

@@ -354,16 +354,16 @@ Payment and fulfillment providers are associated with regions, which are not ass
## Build a Storefront
Medusa provides a Next.js starter storefront that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js storefront, or create a custom storefront.
Medusa provides a Next.js Starter Template that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js Starter Template, or create a custom storefront.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/starters/nextjs-medusa-starter',
label: 'Option 1: Use Next.js Storefront',
label: 'Option 1: Use Next.js Starter Template',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Install the Next.js Storefront to customize it.',
description: 'Install the Next.js Starter Template to customize it.',
}
},
{

View File

@@ -115,16 +115,16 @@ Implementing the logic depends on your use case, but you'll mainly need to do tw
## Build a Storefront
Medusa provides a Next.js starter storefront that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js storefront, or create a custom storefront.
Medusa provides a Next.js Starter Template that you can use with Medusa. Since you've customized your Medusa project, you'll need to either customize the existing Next.js Starter Template, or create a custom storefront.
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/starters/nextjs-medusa-starter',
label: 'Option 1: Use Next.js Storefront',
label: 'Option 1: Use Next.js Starter Template',
customProps: {
icon: Icons['academic-cap-solid'],
description: 'Install the Next.js Storefront to customize it.',
description: 'Install the Next.js Starter Template to customize it.',
}
},
{

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. Youll 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. Youll 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:

View File

@@ -12,7 +12,7 @@ In this document, youll learn about the different resources you need and the
## Overview
Although Medusa provides a Next.js starter storefront, you have full freedom in how you choose to build your storefront. This includes anything from what framework you choose to what functionalities you choose to include.
Although Medusa provides a Next.js Starter Template, you have full freedom in how you choose to build your storefront. This includes anything from what framework you choose to what functionalities you choose to include.
This guide provides a roadmap that can guide you into how you can build your own storefront, regardless of what tools youre using.

View File

@@ -1,7 +1,7 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
This error can occur while installing any of Medusa's projects (for example, Next.js storefront). There is no specific cause to this error.
This error can occur while installing any of Medusa's projects (for example, Next.js Starter Template). There is no specific cause to this error.
One way to resolve it is by removing the `node_modules` directory in the project and re-installing the dependencies: