docs: update next.js storefront snippets (#10840)
This commit is contained in:
@@ -58,17 +58,17 @@ npm install
|
||||
Then, expand the Environment Variables section and add the following variables:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_MEDUSA_BACKEND_URL= # URL of Medusa application
|
||||
MEDUSA_BACKEND_URL= # URL of Medusa application
|
||||
NEXT_PUBLIC_DEFAULT_REGION=us # or a different region that you prefer
|
||||
NEXT_PUBLIC_PUBLISHABLE_KEY= # publishable API key of the storefront's sales channel
|
||||
NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY= # publishable API key of the storefront's sales channel
|
||||
REVALIDATE_SECRET=supersecret # TODO generate random string
|
||||
```
|
||||
|
||||
Where:
|
||||
|
||||
1. `NEXT_PUBLIC_MEDUSA_BACKEND_URL` is the URL of your deployed Medusa application
|
||||
1. `MEDUSA_BACKEND_URL` is the URL of your deployed Medusa application
|
||||
2. `NEXT_PUBLIC_DEFAULT_REGION` is the country code of a region to be used by default, if the customer hasn’t selected a region.
|
||||
3. `NEXT_PUBLIC_PUBLISHABLE_KEY` is the publishable API key of the storefront. You can create one or find the default one in the Medusa Admin dashboard.
|
||||
3. `NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY` is the publishable API key of the storefront. You can create one or find the default one in the Medusa Admin dashboard.
|
||||
4. `REVALIDATE_SECRET` is a random string for [Next.js revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#on-demand-revalidation).
|
||||
|
||||
Make sure to add other relevant environment variables. For example, if you’re using the Stripe Payment Module Provider in the Medusa application, add the `NEXT_PUBLIC_STRIPE_KEY` environment variable.
|
||||
|
||||
@@ -1204,14 +1204,19 @@ import { client } from "../../../../../sanity/lib/client"
|
||||
|
||||
// ...
|
||||
|
||||
export default async function ProductPage({ params }: Props) {
|
||||
export default async function ProductPage(props: Props) {
|
||||
const params = await props.params
|
||||
const region = await getRegion(params.countryCode)
|
||||
|
||||
if (!region) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
const pricedProduct = await getProductByHandle(params.handle, region.id)
|
||||
const pricedProduct = await listProducts({
|
||||
countryCode: params.countryCode,
|
||||
queryParams: { handle: params.handle },
|
||||
}).then(({ response }) => response.products[0])
|
||||
|
||||
if (!pricedProduct) {
|
||||
notFound()
|
||||
}
|
||||
@@ -1224,7 +1229,6 @@ export default async function ProductPage({ params }: Props) {
|
||||
product={pricedProduct}
|
||||
region={region}
|
||||
countryCode={params.countryCode}
|
||||
sanity={sanity}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -144,12 +144,12 @@ Refer to [this guide](./guides/customize-stripe/page.mdx) to learn how to custom
|
||||
|
||||
## Change Medusa Application URL
|
||||
|
||||
By default, the Medusa application runs at `http://localhost:9000`. This value is defined in your Next.js Starter storefront under the environment variable `NEXT_PUBLIC_MEDUSA_BACKEND_URL`.
|
||||
By default, the Medusa application runs at `http://localhost:9000`. This value is defined in your Next.js Starter storefront under the environment variable `MEDUSA_BACKEND_URL`.
|
||||
|
||||
To change the URL of the Medusa application in the storefront, set the `NEXT_PUBLIC_MEDUSA_BACKEND_URL` environment variable:
|
||||
To change the URL of the Medusa application in the storefront, set the `MEDUSA_BACKEND_URL` environment variable:
|
||||
|
||||
```bash
|
||||
NEXT_PUBLIC_MEDUSA_BACKEND_URL=https://example.com
|
||||
MEDUSA_BACKEND_URL=https://example.com
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user