diff --git a/www/docs/content/starters/nextjs-medusa-starter.mdx b/www/docs/content/starters/nextjs-medusa-starter.mdx index 5bc9e97636..fd48f848bf 100644 --- a/www/docs/content/starters/nextjs-medusa-starter.mdx +++ b/www/docs/content/starters/nextjs-medusa-starter.mdx @@ -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. @@ -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). -![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: @@ -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` @@ -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= @@ -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= @@ -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= @@ -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: