Files
medusa-store/www/apps/book/app/storefront-development/nextjs-starter/page.mdx
Shahed Nasser 327e446974 docs: general fixes and overall changes (#7258)
* editing halfway

* edited second half

* adjust starter steps

* fix build

* typo fix
2024-05-07 18:00:28 +02:00

68 lines
1.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
export const metadata = {
title: `${pageNumber} Next.js Starter`,
}
# {metadata.title}
In this chapter, youll learn how to install and use the Next.js Starter storefront.
<Note type="soon">
The Next.js starter is currently in development to fully support Medusa v2.
</Note>
## Install Next.js Starter
<Note type="check">
- [Node v18+](https://nodejs.org/en/)
- At least one region in the Medusa application.
</Note>
1. Clone the `feat/v2` branch of the [Next.js Starter](https://github.com/medusajs/nextjs-starter-medusa):
```bash
git clone https://github.com/medusajs/nextjs-starter-medusa -b feat/v2 my-medusa-storefront
```
2. Change to the `my-medusa-storefront` directory, install the dependencies, and rename the template environment variable:
```bash npm2yarn
cd my-medusa-storefront
npm install
mv .env.template .env.local
```
3. While the Medusa application is running, start the Next.js storefront:
```bash npm2yarn
npm run dev
```
Your Next.js Starter Storefront is now running at `localhost:8000`.
---
## Customize Storefront
To customize the storefront, refer to the following directories:
- `src/app`: The storefronts pages.
- `src/modules`: The storefronts components.
- `src/styles`: The storefronts styles.
<Note title="Tip">
You can learn more about development with Next.js through [their documentation](https://nextjs.org/docs/getting-started).
</Note>
---
## Configurations and Compatible Plugins
The Next.js Starter is compatible with some Medusa plugins out-of-the-box, such as the MeiliSearch or Stripe plugins. You can also change some of its configurations if necessary.
Refer to the Next.js Starter reference for more details.