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

docs: removed the gatsby storefront guide (#3527)

Browse Source 
* docs: removed the gatsby storefront guide

* docs: fixed query value
This commit is contained in:
Shahed Nasser
2023-03-20 19:11:55 +02:00
committed by GitHub
parent 812c8c6abd
commit 7c2bd1f5cf
30 changed files with 87 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/content/admin/quickstart.mdx
View File

@@ -174,5 +174,5 @@ You can learn more about Medusa admin and its features in the [User Guide](../us
## See Also
- [Customize Medusa Admin](./development.md)
- Install the [Next.js](../starters/nextjs-medusa-starter.mdx) or [Gatsby](../starters/gatsby-medusa-starter.mdx) storefront starters.
- Install the [Next.js](../starters/nextjs-medusa-starter.mdx) storefront starter.
- [Use `create-medusa-app` to install all of Medusa’s 3 components.](../create-medusa-app.mdx)

2
docs/content/create-medusa-app.mdx
View File

@@ -107,7 +107,7 @@ If you choose an option other than `None`, a storefront will be installed under
:::tip
Learn more about the [Next.js](./starters/nextjs-medusa-starter.mdx) and [Gatsby](./starters/gatsby-medusa-starter.mdx) starter storefronts.
Learn more about the [Next.js starter storefront](./starters/nextjs-medusa-starter.mdx).
:::

8
docs/content/deployments/storefront/deploying-gatsby-on-netlify.md
View File

@@ -5,6 +5,12 @@ addHowToData: true
# Deploy Gatsby Storefront on Netlify
:::note
The Gatsby storefront has been deprecated and it's not recommended to use it moving forward. You can use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) instead or build your own.
:::
In this document, you’ll learn how to deploy the Gatsby Storefront on [Netlify](https://www.netlify.com/).
Alternatively, you can use this button to deploy the Gatsby Storefront to Netlify directly:
@@ -19,7 +25,7 @@ Alternatively, you can use this button to deploy the Gatsby Storefront to Netlif
### Medusa Components
Before proceeding with this documentation, it is assumed you already have the Gatsby storefront installed locally. If not, please go through the [quickstart guide](../../starters/gatsby-medusa-starter.mdx) first.
Before proceeding with this documentation, it is assumed you already have the Gatsby storefront installed locally.
Additionally, this documentation does not cover how to deploy the Medusa backend. If you want to deploy the Medusa backend, [check out one of the deployment documentation related to the Medusa backend](../server/index.mdx).

2
docs/content/development/notification/create-notification-provider.md
View File

@@ -309,7 +309,7 @@ Then, place an order either using the [REST APIs](/api/store) or using the store
:::tip
If you don’t have a storefront installed you can get started with either the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) starter storefronts in minutes.
If you don’t have a storefront installed you can get started with the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront in minutes.
:::

11
docs/content/homepage.mdx
View File

@@ -113,7 +113,7 @@ Medusa provides the essential building blocks that developers can put together t
},
]} />
<DocCardList colSize={4} items={[
<DocCardList colSize={6} items={[
{
type: 'link',
href: '/cli/reference',
@@ -132,15 +132,6 @@ Medusa provides the essential building blocks that developers can put together t
description: 'Install the Next.js starter storefront and use it with the Medusa backend.'
}
},
{
type: 'link',
href: '/starters/gatsby-medusa-starter',
label: 'Gatsby Storefront Quickstart',
customProps: {
icon: Icons['gatsby'],
description: 'Install the Gatsby starter storefront and use it with the Medusa backend.'
}
},
]} />
<DocCardList colSize={6} items={[

2
docs/content/modules/carts-and-checkout/backend/add-payment-provider.md
View File

@@ -612,7 +612,7 @@ This method returns an array of saved payment methods retrieved from the third-p
:::note
If you’re using Medusa’s [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefront starters, note that the presentation of this method is not implemented. You’ll need to implement the UI and pages for this method based on your implementation and the provider you are using.
If you’re using Medusa’s [Next.js](../../../starters/nextjs-medusa-starter.mdx) storefront starter, note that the presentation of this method is not implemented. You’ll need to implement the UI and pages for this method based on your implementation and the provider you are using.
:::

2
docs/content/modules/carts-and-checkout/storefront/implement-cart.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/carts-and-checkout/storefront/implement-checkout-flow.mdx
View File

@@ -30,7 +30,7 @@ It’s 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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/customers/storefront/implement-customer-profiles.mdx
View File

@@ -38,7 +38,7 @@ You can use Medusa’s 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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It's also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/discounts/storefront/use-discounts-in-checkout.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/gift-cards/storefront/use-gift-cards.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/orders/storefront/handle-order-edits.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/orders/storefront/implement-claim-order.mdx
View File

@@ -45,7 +45,7 @@ In this document, you’ll 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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/regions-and-currencies/storefront/use-regions.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/modules/sales-channels/storefront/use-sales-channels.mdx
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 Medusa’s storefronts. If you don’t have a storefront set up, you can install either the [Next.js](../../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../../starters/gatsby-medusa-starter.mdx) storefronts.
It is also assumed you already have a storefront set up. It can be a custom storefront or one of Medusa’s storefronts. If you don’t have a storefront set up, you can install the [Next.js starter storefront](../../../starters/nextjs-medusa-starter.mdx).
### JS Client

2
docs/content/plugins/analytics/segment.md
View File

@@ -135,7 +135,7 @@ Run your backend with the following command:
npm run start
```
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](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts.
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).
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.

2
docs/content/plugins/file-service/s3.md
View File

@@ -224,4 +224,4 @@ Where `<BUCKET_NAME>` is the name of the S3 bucket you’re using.
- 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) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts.
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.

2
docs/content/plugins/file-service/spaces.md
View File

@@ -184,4 +184,4 @@ Where `<YOUR_SPACE_DOMAIN>` is the domain name for your Space which can be retri
- 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) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefront.
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.

2
docs/content/plugins/notifications/sendgrid.mdx
View File

@@ -3971,7 +3971,7 @@ To test it out, perform an action that would trigger one of the emails being sen
:::tip
If you don’t have a storefront installed, check out the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) starters to create a storefront in minutes.
If you don’t have a storefront installed, check out the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.
:::

2
docs/content/plugins/notifications/slack.md
View File

@@ -111,4 +111,4 @@ That’s 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) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) starter storefronts.
- Install the [Next.js](../../starters/nextjs-medusa-starter.mdx) starter storefront.

2
docs/content/plugins/notifications/twilio-sms.md
View File

@@ -127,7 +127,7 @@ If you create an order now on your storefront, you should receive a message from
:::tip
If you don’t have a storefront set up yet, you can install one of the [Next.js](../../starters/nextjs-medusa-starter.mdx) or [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefronts.
If you don’t have a storefront set up yet, you can install the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx).
:::

6
docs/content/plugins/payment/paypal.md
View File

@@ -146,7 +146,11 @@ You can test out the payment with PayPal using your sandbox account.
### Add to Gatsby Storefront
Medusa also has a Gatsby storefront that you can use as your ecommerce storefront. If you don’t have the storefront installed, you can follow [this quickstart guide](../../starters/gatsby-medusa-starter.mdx).
:::note
Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead.
:::
In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with its value set to the Client ID:

6
docs/content/plugins/payment/stripe.md
View File

@@ -148,7 +148,11 @@ Now, if you run your Medusa backend and your storefront, on checkout you’ll be
### Add to Gatsby Storefront
Medusa also has a Gatsby storefront that you can use as your ecommerce store. If you don’t have the storefront installed, you can follow [this quickstart guide](../../starters/gatsby-medusa-starter).
:::note
Medusa's Gatsby storefront is deprecated and it is recommended to use the [Next.js storefront](../../starters/nextjs-medusa-starter.mdx) or build your own storefront instead.
:::
In your `.env.development` file (or the file you’re using for your environment variables) add the following variable with the value set to the Publishable Key:

4
docs/content/plugins/search/algolia.md
View File

@@ -171,7 +171,7 @@ This feature is only available if you have Redis installed and configured with y
## Add Search to your Storefront
In this section, you’ll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks such as the [Gatsby](../../starters/gatsby-medusa-starter.mdx) storefront.
In this section, you’ll learn how to add the UI on your storefront to allow searching with Algolia. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks.
### Storefront Prerequisites
@@ -179,7 +179,7 @@ It is assumed you already have a storefront set up and working with the Medusa b
:::tip
If you don’t have a storefront set up, you can use the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) storefronts Medusa provides.
If you don’t have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
:::

4
docs/content/plugins/search/meilisearch.md
View File

@@ -132,7 +132,7 @@ This feature is only available if you have Redis installed and configured with y
## Add Search to your Storefront
In this section, you’ll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks such as the [Gatsby storefront](../../starters/gatsby-medusa-starter.mdx).
In this section, you’ll learn how to add the UI on your storefront to allow searching with MeiliSearch. This section has instructions for Medusa’s [Next.js](../../starters/nextjs-medusa-starter.mdx) storefront as well as React-based frameworks.
### Storefront Prerequisites
@@ -140,7 +140,7 @@ It is assumed you already have a storefront set up and working with the Medusa b
:::tip
If you don’t have a storefront set up, you can use the [Gatsby](../../starters/gatsby-medusa-starter.mdx) or [Next.js](../../starters/nextjs-medusa-starter.mdx) storefronts Medusa provides.
If you don’t have a storefront set up, you can use the [Next.js starter storefront](../../starters/nextjs-medusa-starter.mdx) that Medusa provides.
:::

151
docs/content/starters/gatsby-medusa-starter.mdx
View File

@@ -1,151 +0,0 @@
---
description: 'Learn how to install the Gatsby starter storefront to use with the Medusa Backend. The Gatsby storefront includes features related to customer profiles, order returns and exchanges, and more.'
---
import Feedback from '@site/src/components/Feedback';
# Gatsby Storefront Quickstart
This document guides you to install and set up the Gatsby Starter Storefront.
![Gatsby Storefront Quick Look](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003111/Medusa%20Docs/Screenshots/LcAsi8r_yivcro.gif)
## Instant Deployment to Netlify
Instead of manually following this guide to install then later deploy the Gatsby Storefront, you can deploy the Gatsby Storefront to Netlify with this button:
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/medusajs/gatsby-starter-medusa" className="img-url">
<img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" className="no-zoom-img" />
</a>
---
## Prerequisites
This document assumes you already have a Medusa backend installed. If you don’t, please follow the [Quickstart guide for the Medusa backend](../development/backend/install.mdx) to learn how to do it.
You should also have the Gatsby CLI installed:
```bash npm2yarn
npm install gatsby-cli -g
```
---
## Installation
:::tip
It is recommended to use [Yarn](https://yarnpkg.com/getting-started/install) for the installation process as it's much faster than using NPM.
:::
1\. Create a new Gatsby project using the [Medusa starter template](https://github.com/medusajs/gatsby-starter-medusa):
```bash
gatsby new my-medusa-storefront https://github.com/medusajs/gatsby-starter-medusa
```
2\. Change to the newly created directory `my-medusa-storefront` and rename the template environment variable file to use environment variables in development:
```bash
cd my-medusa-storefront
mv .env.template .env.development
```
3\. Make sure the Medusa backend is running, then run the local Gatsby server:
```bash npm2yarn
npm run start
```
Your Gatsby storefront is now running at `localhost:8000`!
<Feedback
event="survey_gatsby_quickstart"
question="Did you set up the storefront successfully?"
positiveQuestion="Is there anything that should improved?"
negativeQuestion="Please describe the issue you faced."
/>
:::tip
If you run into errors during the installation, check out [this troubleshooting guide](../troubleshooting/common-installation-errors.mdx).
:::
---
## Development Notes
### Customization
To customize the components, pages, and UI of your Gatsby storefront, just edit files under the `src` directory.
### Data Refresh
The Gatsby storefront uses the [gatsby-source-medusa](https://github.com/medusajs/medusa/tree/master/packages/gatsby-source-medusa) plugin to source data from your Medusa backend. This data includes products, collections, and regions, and as a result, you can query this data in the storefront starter using GraphQL queries. You can also explore the data in your store on `localhost:8000/___graphql`.
Because of this, you must rebuild the site every time you update any of this data for it to be reflected in your storefront. The Medusa team will soon be releasing a new version of the plugin which adds incremental builds, which will improve build times.
### Change Port
By default, the Gatsby storefront runs on port `8000`.
To change the port, change the `develop` command in `package.json` to the following:
```json
"scripts": {
//other scripts
"develop": "gatsby develop --port=<PORT>"
}
```
Make sure to replace `<PORT>` with the port number you want the storefront to run on. For example, `3000`.
Then, on your backend, update the environment variable `STORE_CORS` to the URL with the new port:
```bash
STORE_CORS=http://localhost:<PORT>
```
:::info
For more details about the Store Cross-Origin Resource Sharing (CORS) configuration, check out the [Configure your Backend documentation](../development/backend/configurations.md#storefront-cors).
:::
### Development Resources
If you’re not familiar with Gatsby, you can learn more about it through the following resources:
- [Documentation](https://www.gatsbyjs.com/docs)
- [Plugin Library](https://www.gatsbyjs.com/plugins/)
- [Cheat Sheet](https://www.gatsbyjs.com/docs/cheat-sheet/)
---
## Storefront Features
The Gatsby storefront comes with a lot of features out of the box including:
- View all products and manage your cart.
![Products Page](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003126/Medusa%20Docs/Screenshots/P0Mpvxh_qznct6.png)
- Customer authentication.
![Sign In Page](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003139/Medusa%20Docs/Screenshots/0sVcZeS_z6cftp.png)
- Full checkout workflow.
![One-Page Checkout](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003152/Medusa%20Docs/Screenshots/5wSs3yZ_iivxrh.png)
- Request swaps and returns using a customer’s order ID and Email.
![Request Return for Order](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003162/Medusa%20Docs/Screenshots/mAChp3f_ubd89n.png)
---
## See Also
- [Storefront API reference](https://docs.medusajs.com/api/store)
- [Deploy the Gatsby storefront on Netlify](../deployments/storefront/deploying-gatsby-on-netlify.md)
- [Install Stripe as a payment provider](../plugins/payment/stripe.md#add-to-gatsby-storefront)

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

@@ -3,11 +3,28 @@ description: 'Learn how to install the Next.js starter storefront to use with Me
---
import Feedback from '@site/src/components/Feedback';
import QueryNote from '@site/src/components/QueryNote';
# Next.js Storefront Quickstart
This document guides you to install and set up the Next.js Starter Storefront.
<!-- vale docs.We = NO -->
<QueryNote
query={{
key: 'ref',
value: 'gatsby-medusa-starter'
}}
admonition={{
type: 'note'
}}
>
We've deprecated the Gatsby starter storefront and instead recommend using the Next.js storefront or building your own custom storefront.
</QueryNote>
<!-- vale docs.We = YES -->
![Next.js Storefront Demo](https://res.cloudinary.com/dza7lstvk/image/upload/v1668003177/Medusa%20Docs/Screenshots/koJl8uR_n3gvii.gif)
## Instant Deployment to Netlify

9
www/docs/sidebars.js
View File

@@ -97,15 +97,6 @@ module.exports = {
},
className: 'homepage-sidebar-item'
},
{
type: 'doc',
id: 'starters/gatsby-medusa-starter',
label: 'Gatsby Storefront',
customProps: {
sidebar_icon: 'gatsby'
},
className: 'homepage-sidebar-item'
},
{
type: 'html',
value: 'SDKs',

25
www/docs/src/components/QueryNote/index.js Normal file
View File

@@ -0,0 +1,25 @@
import React from "react";
import { useQueryStringValue } from "@docusaurus/theme-common/internal"
import Admonition from "@theme/Admonition"
export default function QueryNote ({
query: {
key,
value = ''
},
//admonition props
admonition,
children
}) {
const queryValue = useQueryStringValue(key)
return (
<>
{queryValue === value && (
<Admonition {...admonition}>
{children}
</Admonition>
)}
</>
)
}

4
www/docs/vercel.json
View File

@@ -464,6 +464,10 @@
{
"source": "/introduction",
"destination": "/development/fundamentals/architecture-overview"
},
{
"source": "/starters/gatsby-medusa-starter",
"destination": "/starters/nextjs-medusa-starter?ref=gatsby-medusa-starter"
}
]
}