Skip to content

Commit 443c611

Browse files
authored
docs: updated Next.js deployment guide (medusajs#5756)
1 parent fa49352 commit 443c611

File tree

2 files changed

+22
-42
lines changed

2 files changed

+22
-42
lines changed

www/apps/docs/content/deployments/storefront/deploying-next-on-vercel.mdx

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,6 @@ import CorsErrorSection from '../../troubleshooting/cors-issues.md'
1010

1111
In this document, you’ll learn how to deploy the Next.js Starter Template on Vercel.
1212

13-
Alternatively, you can directly deploy the Next.js Starter Template to Vercel with this button.
14-
15-
<a
16-
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" className="img-url no-zoom-img">
17-
<img src="https://vercel.com/button" alt="Deploy with Vercel" className="no-zoom-img"/>
18-
</a>
19-
20-
:::note
21-
22-
After the deployment with this button, make sure to [configure CORS in your backend](#step-3-configure-cors-on-the-medusa-backend).
23-
24-
:::
25-
2613
## Prerequisites
2714

2815
### Medusa Components
@@ -31,6 +18,10 @@ It is assumed you already have installed the Next.js Starter Template locally. I
3118

3219
It’s 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).
3320

21+
### Storefront Preparations
22+
23+
If you're not using the [Serverless Modules](../../starters/nextjs-medusa-starter.mdx#using-serverless-modules) in your storefront, either delete the `src/app/api` directory or exclude it in `.gitignore`. Otherwise, the deployment will fail.
24+
3425
### Required Accounts
3526

3627
- [Vercel Account](https://vercel.com)
@@ -102,7 +93,12 @@ This section explains how to deploy the storefront using the Vercel website:
10293
3. Choose Project from the dropdown.
10394
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 haven’t connected your Vercel account to any Git provider, you must do that first.
10495
5. In the Configure Project form:
105-
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.
96+
1. Open the Environment Variables collapsible, and add the following environment variables:
97+
- `NEXT_PUBLIC_MEDUSA_BACKEND_URL`: the URL to your deployed Medusa Backend.
98+
- `NEXT_PUBLIC_BASE_URL`: The URL of your storefront. If you don't have a domain ready yet, you can add it later. However, you may face some errors in your storefront.
99+
- `REVALIDATE_SECRET`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
100+
- If you're using Serverless modules, set the `POSTGRES_URL` environment variable to the connection URL of your PostgreSQL database, and set the `MEDUSA_FF_MEDUSA_V2=true` variable.
101+
- You can set any other environment variables you're using at this step or later.
106102
2. You can optionally edit the Project Name.
107103
6. Once you’re done, click on the “Deploy” button.
108104

@@ -122,9 +118,20 @@ In the directory holding your storefront, run the following command to deploy yo
122118

123119
```bash
124120
vercel --build-env NEXT_PUBLIC_MEDUSA_BACKEND_URL=<YOUR_BACKEND_URL>
121+
vercel --build-env NEXT_PUBLIC_BASE_URL=<YOUR_BASE_URL>
122+
vercel --build-env REVALIDATE_SECRET=<YOUR_REVALIDATION_SECRET>
125123
```
126124

127-
Where `<YOUR_BACKEND_URL>` is the URL of your deployed Medusa backend.
125+
Where:
126+
127+
- `<YOUR_BACKEND_URL>`: the URL of your deployed Medusa backend.
128+
- `<YOUR_BASE_URL>`: The URL of your storefront. If you don't have a domain ready yet, you can add it later. However, you may face some errors in your storefront.
129+
- `<YOUR_REVALIDATION_SECRET>`: A secret used for revalidating data. Learn more in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
130+
131+
In addition:
132+
133+
- If you're using Serverless modules, set the `POSTGRES_URL` environment variable to the connection URL of your PostgreSQL database, and set the `MEDUSA_FF_MEDUSA_V2=true` variable.
134+
- You can set any other environment variables you're using at this step or later.
128135

129136
You’ll then be asked to log in if you haven’t already, and to choose the scope to deploy your project to. You can also decide to link the storefront to an existing project, or change the project’s name.
130137

www/apps/docs/content/starters/nextjs-medusa-starter.mdx

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,8 @@ import CorsErrorSection from '../troubleshooting/cors-issues.md'
1313

1414
This document guides you to install and set up the Next.js Starter Storefront.
1515

16-
<!-- vale docs.We = NO -->
17-
18-
<QueryNote
19-
query={{
20-
key: 'ref',
21-
value: 'gatsby-medusa-starter'
22-
}}
23-
admonition={{
24-
type: 'note'
25-
}}
26-
>
27-
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).
28-
</QueryNote>
29-
30-
<!-- vale docs.We = YES -->
31-
3216
![Next.js Starter Storefront](https://res.cloudinary.com/dza7lstvk/image/upload/v1700744057/Medusa%20Docs/Screenshots/next-js-starter-docs_tbu23j.jpg)
3317

34-
## Instant Deployment to Vercel
35-
36-
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:
37-
38-
<a
39-
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" className="img-url no-zoom-img">
40-
<img src="https://vercel.com/button" alt="Deploy with Vercel" className="no-zoom-img"/>
41-
</a>
42-
43-
---
44-
4518
## Prerequisites
4619

4720
Before following along with this guide, make sure you have v16 or greater of Node.js:

0 commit comments

Comments
 (0)