docs: update next.js storefront snippets (#10840)

This commit is contained in:
Shahed Nasser
2025-01-06 16:35:56 +02:00
committed by GitHub
parent 3253e19b36
commit 9490c265b2
4 changed files with 17 additions and 13 deletions
@@ -58,17 +58,17 @@ npm install
Then, expand the Environment Variables section and add the following variables: Then, expand the Environment Variables section and add the following variables:
```bash ```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_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 REVALIDATE_SECRET=supersecret # TODO generate random string
``` ```
Where: 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 hasnt selected a region. 2. `NEXT_PUBLIC_DEFAULT_REGION` is the country code of a region to be used by default, if the customer hasnt 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). 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 youre using the Stripe Payment Module Provider in the Medusa application, add the `NEXT_PUBLIC_STRIPE_KEY` environment variable. Make sure to add other relevant environment variables. For example, if youre 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) const region = await getRegion(params.countryCode)
if (!region) { if (!region) {
notFound() 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) { if (!pricedProduct) {
notFound() notFound()
} }
@@ -1224,7 +1229,6 @@ export default async function ProductPage({ params }: Props) {
product={pricedProduct} product={pricedProduct}
region={region} region={region}
countryCode={params.countryCode} 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 ## 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 ```bash
NEXT_PUBLIC_MEDUSA_BACKEND_URL=https://example.com MEDUSA_BACKEND_URL=https://example.com
``` ```
--- ---
+3 -3
View File
@@ -103,13 +103,13 @@ export const generatedEditDates = {
"app/create-medusa-app/page.mdx": "2024-08-05T11:10:55+03:00", "app/create-medusa-app/page.mdx": "2024-08-05T11:10:55+03:00",
"app/deployment/admin/vercel/page.mdx": "2024-10-16T08:10:29.377Z", "app/deployment/admin/vercel/page.mdx": "2024-10-16T08:10:29.377Z",
"app/deployment/medusa-application/railway/page.mdx": "2024-11-11T11:50:10.517Z", "app/deployment/medusa-application/railway/page.mdx": "2024-11-11T11:50:10.517Z",
"app/deployment/storefront/vercel/page.mdx": "2024-07-26T07:21:31+00:00", "app/deployment/storefront/vercel/page.mdx": "2025-01-06T12:19:31.142Z",
"app/deployment/page.mdx": "2024-11-25T14:31:45.277Z", "app/deployment/page.mdx": "2024-11-25T14:31:45.277Z",
"app/integrations/page.mdx": "2024-12-16T16:46:12.395Z", "app/integrations/page.mdx": "2024-12-16T16:46:12.395Z",
"app/medusa-cli/page.mdx": "2024-08-28T11:25:32.382Z", "app/medusa-cli/page.mdx": "2024-08-28T11:25:32.382Z",
"app/medusa-container-resources/page.mdx": "2024-12-09T16:18:38.852Z", "app/medusa-container-resources/page.mdx": "2024-12-09T16:18:38.852Z",
"app/medusa-workflows-reference/page.mdx": "2024-12-09T16:22:32.129Z", "app/medusa-workflows-reference/page.mdx": "2024-12-09T16:22:32.129Z",
"app/nextjs-starter/page.mdx": "2024-12-12T12:31:16.661Z", "app/nextjs-starter/page.mdx": "2025-01-06T12:19:31.143Z",
"app/recipes/b2b/page.mdx": "2024-10-03T13:07:44.153Z", "app/recipes/b2b/page.mdx": "2024-10-03T13:07:44.153Z",
"app/recipes/commerce-automation/page.mdx": "2024-10-16T08:52:01.585Z", "app/recipes/commerce-automation/page.mdx": "2024-10-16T08:52:01.585Z",
"app/recipes/digital-products/examples/standard/page.mdx": "2025-01-06T09:03:35.202Z", "app/recipes/digital-products/examples/standard/page.mdx": "2025-01-06T09:03:35.202Z",
@@ -3173,7 +3173,7 @@ export const generatedEditDates = {
"references/types/HttpTypes/interfaces/types.HttpTypes.AdminBatchProductVariantRequest/page.mdx": "2024-12-09T13:21:34.309Z", "references/types/HttpTypes/interfaces/types.HttpTypes.AdminBatchProductVariantRequest/page.mdx": "2024-12-09T13:21:34.309Z",
"references/types/WorkflowTypes/ProductWorkflow/interfaces/types.WorkflowTypes.ProductWorkflow.ExportProductsDTO/page.mdx": "2024-12-09T13:21:35.797Z", "references/types/WorkflowTypes/ProductWorkflow/interfaces/types.WorkflowTypes.ProductWorkflow.ExportProductsDTO/page.mdx": "2024-12-09T13:21:35.797Z",
"app/contribution-guidelines/admin-translations/page.mdx": "2024-11-14T08:54:15.369Z", "app/contribution-guidelines/admin-translations/page.mdx": "2024-11-14T08:54:15.369Z",
"app/integrations/guides/sanity/page.mdx": "2024-12-09T16:18:07.779Z", "app/integrations/guides/sanity/page.mdx": "2025-01-06T13:52:48.705Z",
"references/api_key/types/api_key.FindConfigOrder/page.mdx": "2024-11-25T17:49:28.715Z", "references/api_key/types/api_key.FindConfigOrder/page.mdx": "2024-11-25T17:49:28.715Z",
"references/auth/types/auth.FindConfigOrder/page.mdx": "2024-11-25T17:49:28.887Z", "references/auth/types/auth.FindConfigOrder/page.mdx": "2024-11-25T17:49:28.887Z",
"references/cart/types/cart.FindConfigOrder/page.mdx": "2024-11-25T17:49:29.455Z", "references/cart/types/cart.FindConfigOrder/page.mdx": "2024-11-25T17:49:29.455Z",