npm - @shopify/create-hydrogen - Versions diffs - 5.0.19 → 5.0.21 - Mend

@shopify/create-hydrogen 5.0.19 → 5.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/assets/hydrogen/starter/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,52 @@
 # skeleton
+## 2025.1.7
+### Patch Changes
+- Fix an issue with our starter template where duplicate content can exist on URLs that use internationalized handles. For example, if you have a product handle in english of `the-havoc` and translate it to `das-chaos` in German, duplicate content exists at both: ([#2821](https://github.com/Shopify/hydrogen/pull/2821)) by [@blittle](https://github.com/blittle)
+  1. https://hydrogen.shop/de-de/products/das-chaos
+  2. https://hydrogen.shop/de-de/products/the-havoc
+  We've changed the starter template to make the second redirect to the first.
+- Added the Cursor rule for the subscriptions recipe. ([#2874](https://github.com/Shopify/hydrogen/pull/2874)) by [@ruggishop](https://github.com/ruggishop)
+- Fix faulty truthiness check for cart quantity ([#2855](https://github.com/Shopify/hydrogen/pull/2855)) by [@frontsideair](https://github.com/frontsideair)
+- Refactor ProductItem into a separate component ([#2872](https://github.com/Shopify/hydrogen/pull/2872)) by [@juanpprieto](https://github.com/juanpprieto)
+- Updated dependencies [[`f80f3bc7`](https://github.com/Shopify/hydrogen/commit/f80f3bc7239b3ee6641cb468a17e15c77bb7815b), [`61ddf924`](https://github.com/Shopify/hydrogen/commit/61ddf92487524b3c04632ae2cfdaa2869a3ae02c), [`642bde4f`](https://github.com/Shopify/hydrogen/commit/642bde4f3df11511e125b013abd977618da25692)]:
+  - @shopify/hydrogen@2025.1.4
+## 2025.1.6
+### Patch Changes
+- Moved the `Layout` component back into `root.tsx` to avoid issues with styled errors. ([#2829](https://github.com/Shopify/hydrogen/pull/2829)) by [@ruggishop](https://github.com/ruggishop)
+  1. If you have a separate `app/layout.tsx` file, delete it and move its default exported component into your `root.tsx`. For example:
+     ```ts
+     // /app/root.tsx
+     export function Layout({children}: {children?: React.ReactNode}) {
+       const nonce = useNonce();
+       const data = useRouteLoaderData<RootLoader>('root');
+       return (
+         <html lang="en">
+         ...
+       );
+     }
+     ```
+## 2025.1.5
+### Patch Changes
+- Fixed an issue with the creation of JavaScript projects. ([#2818](https://github.com/Shopify/hydrogen/pull/2818)) by [@seanparsons](https://github.com/seanparsons)
 ## 2025.1.4
 ### Patch Changes
@@ -33,7 +80,30 @@
   Please refer to the Remix documentation for more details on `v3_routeConfig` future flag: [https://remix.run/docs/en/main/start/future-flags#v3_routeconfig](https://remix.run/docs/en/main/start/future-flags#v3_routeconfig)
-  1. Add the following npm package dev dependencies:
+  1. Update your `vite.config.ts`.
+     ```diff
+     export default defineConfig({
+       plugins: [
+         hydrogen(),
+         oxygen(),
+         remix({
+     -      presets: [hydrogen.preset()],
+     +      presets: [hydrogen.v3preset()],
+         future: {
+           v3_fetcherPersist: true,
+           v3_relativeSplatPath: true,
+           v3_throwAbortReason: true,
+           v3_lazyRouteDiscovery: true,
+           v3_singleFetch: true,
+     +      v3_routeConfig: true,
+         },
+       }),
+       tsconfigPaths(),
+     ],
+     ```
+  1. Update your `package.json` and install the new packages. Make sure to match the Remix version along with other Remix npm packages and ensure the versions are 2.16.1 or above:
      ```diff
        "devDependencies": {
@@ -42,22 +112,29 @@
      +    "@remix-run/route-config": "^2.16.1",
      ```
-  1. If you have `export function Layout` in your `root.tsx`, move this export into its own file. For example:
+  1. Move the `Layout` component export from `root.tsx` into its own file. Make sure to supply an `<Outlet>` so Remix knows where to inject your route content.
      ```ts
      // /app/layout.tsx
+     import {Outlet} from '@remix-run/react';
      export default function Layout() {
        const nonce = useNonce();
        const data = useRouteLoaderData<RootLoader>('root');
        return (
          <html lang="en">
-         ...
+           ...
+           <Outlet />
+           ...
+         </html>
        );
      }
+     // Remember to remove the Layout export from your root.tsx
      ```
-  1. Create a `routes.ts` file.
+  1. Add a routes.ts file. This is your new Remix route configuration file.
      ```ts
      import { flatRoutes } from "@remix-run/fs-routes";
@@ -70,18 +147,6 @@
      ]) satisfies RouteConfig;
      ```
-  1. Update your `vite.config.ts`.
-     ```diff
-     export default defineConfig({
-       plugins: [
-         hydrogen(),
-         oxygen(),
-         remix({
-     -      presets: [hydrogen.preset()],
-     +      presets: [hydrogen.v3preset()],
-     ```
 - Updated dependencies [[`0425e50d`](https://github.com/Shopify/hydrogen/commit/0425e50dafe2f42326cba67076e5fcea2905e885), [`74ef1ba7`](https://github.com/Shopify/hydrogen/commit/74ef1ba7d41988350e9d2c81731c90381943d1f0)]:
   - @shopify/remix-oxygen@2.0.12
   - @shopify/hydrogen@2025.1.3

package/dist/assets/hydrogen/starter/app/components/CartLineItem.tsx CHANGED Viewed

@@ -123,6 +123,7 @@ function CartLineRemoveButton({
 }) {
   return (
     <CartForm
+      fetcherKey={getUpdateKey(lineIds)}
       route="/cart"
       action={CartForm.ACTIONS.LinesRemove}
       inputs={{lineIds}}
@@ -141,8 +142,11 @@ function CartLineUpdateButton({
   children: React.ReactNode;
   lines: CartLineUpdateInput[];
 }) {
+  const lineIds = lines.map((line) => line.id);
   return (
     <CartForm
+      fetcherKey={getUpdateKey(lineIds)}
       route="/cart"
       action={CartForm.ACTIONS.LinesUpdate}
       inputs={{lines}}
@@ -151,3 +155,14 @@ function CartLineUpdateButton({
     </CartForm>
   );
 }
+/**
+ * Returns a unique key for the update action. This is used to make sure actions modifying the same line
+ * items are not run concurrently, but cancel each other. For example, if the user clicks "Increase quantity"
+ * and "Decrease quantity" in rapid succession, the actions will cancel each other and only the last one will run.
+ * @param lineIds - line ids affected by the update
+ * @returns
+ */
+function getUpdateKey(lineIds: string[]) {
+  return [CartForm.ACTIONS.LinesUpdate, ...lineIds].join('-');
+}

package/dist/assets/hydrogen/starter/app/components/CartMain.tsx CHANGED Viewed

@@ -26,7 +26,7 @@ export function CartMain({layout, cart: originalCart}: CartMainProps) {
     cart &&
     Boolean(cart?.discountCodes?.filter((code) => code.applicable)?.length);
   const className = `cart-main ${withDiscount ? 'with-discount' : ''}`;
-  const cartHasItems = cart?.totalQuantity && cart?.totalQuantity > 0;
+  const cartHasItems = cart?.totalQuantity ? cart.totalQuantity > 0 : false;
   return (
     <div className={className}>

package/dist/assets/hydrogen/starter/app/components/ProductItem.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+import {Link} from '@remix-run/react';
+import {Image, Money} from '@shopify/hydrogen';
+import type {
+  ProductItemFragment,
+  CollectionItemFragment,
+  RecommendedProductFragment,
+} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/lib/variants';
+export function ProductItem({
+  product,
+  loading,
+}: {
+  product:
+    | CollectionItemFragment
+    | ProductItemFragment
+    | RecommendedProductFragment;
+  loading?: 'eager' | 'lazy';
+}) {
+  const variantUrl = useVariantUrl(product.handle);
+  const image = product.featuredImage;
+  return (
+    <Link
+      className="product-item"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {image && (
+        <Image
+          alt={image.altText || product.title}
+          aspectRatio="1/1"
+          data={image}
+          loading={loading}
+          sizes="(min-width: 45em) 400px, 100vw"
+        />
+      )}
+      <h4>{product.title}</h4>
+      <small>
+        <Money data={product.priceRange.minVariantPrice} />
+      </small>
+    </Link>
+  );
+}

package/dist/assets/hydrogen/starter/app/lib/redirect.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import {redirect} from '@shopify/remix-oxygen';
+export function redirectIfHandleIsLocalized(
+  request: Request,
+  ...localizedResources: Array<{
+    handle: string;
+    data: {handle: string} & unknown;
+  }>
+) {
+  const url = new URL(request.url);
+  let shouldRedirect = false;
+  localizedResources.forEach(({handle, data}) => {
+    if (handle !== data.handle) {
+      url.pathname = url.pathname.replace(handle, data.handle);
+      shouldRedirect = true;
+    }
+  });
+  if (shouldRedirect) {
+    throw redirect(url.toString());
+  }
+}

package/dist/assets/hydrogen/starter/app/root.tsx CHANGED Viewed

@@ -1,13 +1,21 @@
-import {getShopAnalytics} from '@shopify/hydrogen';
+import {Analytics, getShopAnalytics, useNonce} from '@shopify/hydrogen';
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {
   Outlet,
   useRouteError,
   isRouteErrorResponse,
   type ShouldRevalidateFunction,
+  Links,
+  Meta,
+  Scripts,
+  ScrollRestoration,
+  useRouteLoaderData,
 } from '@remix-run/react';
 import favicon from '~/assets/favicon.svg';
 import {FOOTER_QUERY, HEADER_QUERY} from '~/lib/fragments';
+import resetStyles from '~/styles/reset.css?url';
+import appStyles from '~/styles/app.css?url';
+import {PageLayout} from './components/PageLayout';
 export type RootLoader = typeof loader;
@@ -25,9 +33,9 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
   // revalidate when manually revalidating via useRevalidator
   if (currentUrl.toString() === nextUrl.toString()) return true;
-  // Defaulting to no revalidation for root loader data to improve performance.
-  // When using this feature, you risk your UI getting out of sync with your server.
-  // Use with caution. If you are uncomfortable with this optimization, update the
+  // Defaulting to no revalidation for root loader data to improve performance.
+  // When using this feature, you risk your UI getting out of sync with your server.
+  // Use with caution. If you are uncomfortable with this optimization, update the
   // line below to `return defaultShouldRevalidate` instead.
   // For more details see: https://remix.run/docs/en/main/route/should-revalidate
   return false;
@@ -133,6 +141,39 @@ function loadDeferredData({context}: LoaderFunctionArgs) {
   };
 }
+export function Layout({children}: {children?: React.ReactNode}) {
+  const nonce = useNonce();
+  const data = useRouteLoaderData<RootLoader>('root');
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <link rel="stylesheet" href={resetStyles}></link>
+        <link rel="stylesheet" href={appStyles}></link>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {data ? (
+          <Analytics.Provider
+            cart={data.cart}
+            shop={data.shop}
+            consent={data.consent}
+          >
+            <PageLayout {...data}>{children}</PageLayout>
+          </Analytics.Provider>
+        ) : (
+          children
+        )}
+        <ScrollRestoration nonce={nonce} />
+        <Scripts nonce={nonce} />
+      </body>
+    </html>
+  );
+}
 export default function App() {
   return <Outlet />;
 }

package/dist/assets/hydrogen/starter/app/routes/_index.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import type {
   FeaturedCollectionFragment,
   RecommendedProductsQuery,
 } from 'storefrontapi.generated';
+import {ProductItem} from '~/components/ProductItem';
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Home'}];
@@ -101,21 +102,7 @@ function RecommendedProducts({
             <div className="recommended-products-grid">
               {response
                 ? response.products.nodes.map((product) => (
-                    <Link
-                      key={product.id}
-                      className="recommended-product"
-                      to={`/products/${product.handle}`}
-                    >
-                      <Image
-                        data={product.images.nodes[0]}
-                        aspectRatio="1/1"
-                        sizes="(min-width: 45em) 20vw, 50vw"
-                      />
-                      <h4>{product.title}</h4>
-                      <small>
-                        <Money data={product.priceRange.minVariantPrice} />
-                      </small>
-                    </Link>
+                    <ProductItem key={product.id} product={product} />
                   ))
                 : null}
             </div>
@@ -161,14 +148,12 @@ const RECOMMENDED_PRODUCTS_QUERY = `#graphql
         currencyCode
       }
     }
-    images(first: 1) {
-      nodes {
-        id
-        url
-        altText
-        width
-        height
-      }
+    featuredImage {
+      id
+      url
+      altText
+      width
+      height
     }
   }
   query RecommendedProducts ($country: CountryCode, $language: LanguageCode)

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle.$articleHandle.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image} from '@shopify/hydrogen';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.article.title ?? ''} article`}];
@@ -20,7 +21,11 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, params}: LoaderFunctionArgs) {
+async function loadCriticalData({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) {
   const {blogHandle, articleHandle} = params;
   if (!articleHandle || !blogHandle) {
@@ -38,6 +43,18 @@ async function loadCriticalData({context, params}: LoaderFunctionArgs) {
     throw new Response(null, {status: 404});
   }
+  redirectIfHandleIsLocalized(
+    request,
+    {
+      handle: articleHandle,
+      data: blog.articleByHandle,
+    },
+    {
+      handle: blogHandle,
+      data: blog,
+    },
+  );
   const article = blog.articleByHandle;
   return {article};
@@ -67,7 +84,8 @@ export default function Article() {
       <h1>
         {title}
         <div>
-          {publishedDate} &middot; {author?.name}
+          <time dateTime={article.publishedAt}>{publishedDate}</time> &middot;{' '}
+          <address>{author?.name}</address>
         </div>
       </h1>
@@ -89,7 +107,9 @@ const ARTICLE_QUERY = `#graphql
     $language: LanguageCode
   ) @inContext(language: $language, country: $country) {
     blog(handle: $blogHandle) {
+      handle
       articleByHandle(handle: $articleHandle) {
+        handle
         title
         contentHtml
         publishedAt

package/dist/assets/hydrogen/starter/app/routes/blogs.$blogHandle._index.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Image, getPaginationVariables} from '@shopify/hydrogen';
 import type {ArticleItemFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.blog.title ?? ''} blog`}];
@@ -49,6 +50,8 @@ async function loadCriticalData({
     throw new Response('Not found', {status: 404});
   }
+  redirectIfHandleIsLocalized(request, {handle: params.blogHandle, data: blog});
   return {blog};
 }
@@ -128,6 +131,7 @@ const BLOGS_QUERY = `#graphql
   ) @inContext(language: $language) {
     blog(handle: $blogHandle) {
       title
+      handle
       seo {
         title
         description

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx CHANGED Viewed

@@ -1,14 +1,9 @@
 import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
-import {
-  getPaginationVariables,
-  Image,
-  Money,
-  Analytics,
-} from '@shopify/hydrogen';
-import type {ProductItemFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/lib/variants';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
+import {ProductItem} from '~/components/ProductItem';
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
@@ -56,6 +51,9 @@ async function loadCriticalData({
     });
   }
+  // The API handle might be localized, so redirect to the localized handle
+  redirectIfHandleIsLocalized(request, {handle, data: collection});
   return {
     collection,
   };
@@ -101,38 +99,6 @@ export default function Collection() {
   );
 }
-function ProductItem({
-  product,
-  loading,
-}: {
-  product: ProductItemFragment;
-  loading?: 'eager' | 'lazy';
-}) {
-  const variantUrl = useVariantUrl(product.handle);
-  return (
-    <Link
-      className="product-item"
-      key={product.id}
-      prefetch="intent"
-      to={variantUrl}
-    >
-      {product.featuredImage && (
-        <Image
-          alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
-          data={product.featuredImage}
-          loading={loading}
-          sizes="(min-width: 45em) 400px, 100vw"
-        />
-      )}
-      <h4>{product.title}</h4>
-      <small>
-        <Money data={product.priceRange.minVariantPrice} />
-      </small>
-    </Link>
-  );
-}
 const PRODUCT_ITEM_FRAGMENT = `#graphql
   fragment MoneyProductItem on MoneyV2 {
     amount

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx CHANGED Viewed

@@ -1,9 +1,8 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, Link, type MetaFunction} from '@remix-run/react';
-import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
-import type {ProductItemFragment} from 'storefrontapi.generated';
-import {useVariantUrl} from '~/lib/variants';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {getPaginationVariables} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+import {ProductItem} from '~/components/ProductItem';
 export const meta: MetaFunction<typeof loader> = () => {
   return [{title: `Hydrogen | Products`}];
@@ -69,44 +68,12 @@ export default function Collection() {
   );
 }
-function ProductItem({
-  product,
-  loading,
-}: {
-  product: ProductItemFragment;
-  loading?: 'eager' | 'lazy';
-}) {
-  const variantUrl = useVariantUrl(product.handle);
-  return (
-    <Link
-      className="product-item"
-      key={product.id}
-      prefetch="intent"
-      to={variantUrl}
-    >
-      {product.featuredImage && (
-        <Image
-          alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
-          data={product.featuredImage}
-          loading={loading}
-          sizes="(min-width: 45em) 400px, 100vw"
-        />
-      )}
-      <h4>{product.title}</h4>
-      <small>
-        <Money data={product.priceRange.minVariantPrice} />
-      </small>
-    </Link>
-  );
-}
-const PRODUCT_ITEM_FRAGMENT = `#graphql
-  fragment MoneyProductItem on MoneyV2 {
+const COLLECTION_ITEM_FRAGMENT = `#graphql
+  fragment MoneyCollectionItem on MoneyV2 {
     amount
     currencyCode
   }
-  fragment ProductItem on Product {
+  fragment CollectionItem on Product {
     id
     handle
     title
@@ -119,16 +86,16 @@ const PRODUCT_ITEM_FRAGMENT = `#graphql
     }
     priceRange {
       minVariantPrice {
-        ...MoneyProductItem
+        ...MoneyCollectionItem
       }
       maxVariantPrice {
-        ...MoneyProductItem
+        ...MoneyCollectionItem
       }
     }
   }
 ` as const;
-// NOTE: https://shopify.dev/docs/api/storefront/2024-01/objects/product
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/product
 const CATALOG_QUERY = `#graphql
   query Catalog(
     $country: CountryCode
@@ -140,7 +107,7 @@ const CATALOG_QUERY = `#graphql
   ) @inContext(country: $country, language: $language) {
     products(first: $first, last: $last, before: $startCursor, after: $endCursor) {
       nodes {
-        ...ProductItem
+        ...CollectionItem
       }
       pageInfo {
         hasPreviousPage
@@ -150,5 +117,5 @@ const CATALOG_QUERY = `#graphql
       }
     }
   }
-  ${PRODUCT_ITEM_FRAGMENT}
+  ${COLLECTION_ITEM_FRAGMENT}
 ` as const;

package/dist/assets/hydrogen/starter/app/routes/pages.$handle.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Hydrogen | ${data?.page.title ?? ''}`}];
@@ -19,7 +20,11 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, params}: LoaderFunctionArgs) {
+async function loadCriticalData({
+  context,
+  request,
+  params,
+}: LoaderFunctionArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }
@@ -37,6 +42,8 @@ async function loadCriticalData({context, params}: LoaderFunctionArgs) {
     throw new Response('Not Found', {status: 404});
   }
+  redirectIfHandleIsLocalized(request, {handle: params.handle, data: page});
   return {
     page,
   };
@@ -72,6 +79,7 @@ const PAGE_QUERY = `#graphql
   )
   @inContext(language: $language, country: $country) {
     page(handle: $handle) {
+      handle
       id
       title
       body

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {useLoaderData, type MetaFunction} from '@remix-run/react';
 import {
   getSelectedProductOptions,
@@ -11,6 +11,7 @@ import {
 import {ProductPrice} from '~/components/ProductPrice';
 import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
+import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [
@@ -59,6 +60,9 @@ async function loadCriticalData({
     throw new Response(null, {status: 404});
   }
+  // The API handle might be localized, so redirect to the localized handle
+  redirectIfHandleIsLocalized(request, {handle, data: product});
   return {
     product,
   };