Merge pull request #2135 from graphcommerce-org/feature/GCOM-1217-fix…

…-canonicalize

Make `canonicalize()` work correctly when i18n domain routing is used

.changeset/few-bats-sit.md

@@ -0,0 +1,5 @@
+---
+'@graphcommerce/next-ui': patch
+---
+
+Fix incorrect canonical URLs when i18n domain routing is used

examples/magento-graphcms/graphcommerce.config.js.example

@@ -9,7 +9,10 @@ const config = {
   hygraphEndpoint: 'https://eu-central-1.cdn.hygraph.com/content/ckhx7xadya6xs01yxdujt8i80/master',
   magentoEndpoint: 'https://backend.reachdigital.dev/graphql',
   canonicalBaseUrl: 'https://graphcommerce.vercel.app',
-  storefront: [{ locale: 'en', magentoStoreCode: 'en_US' }],
+  storefront: [
+    { locale: 'en', magentoStoreCode: 'en_US', defaultLocale: true },
+    { locale: 'nl', magentoStoreCode: 'nl_NL' },
+  ],
   recentlyViewedProducts: {
     enabled: true,
   },

packages/next-ui/PageMeta/PageMeta.tsx

@@ -60,18 +60,25 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
     const curLocale = router.locale
 
     // Copied from here https://github.com/vercel/next.js/blob/213c42f446874d29d07fa2cca6e6b11fc9c3b711/packages/next/client/link.tsx#L512
-    const localeDomain =
-      router.isLocaleDomain &&
-      getDomainLocale(as, curLocale, router && router.locales, router.domainLocales)
-
-    href = localeDomain || addBasePath(addLocale(as, curLocale, router.defaultLocale))
-
-    let siteUrl =
-      storefrontConfig(router.locale)?.canonicalBaseUrl ||
-      import.meta.graphCommerce.canonicalBaseUrl
-    if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
-
-    canonical = `${siteUrl}${href}`
+    const localeDomain = getDomainLocale(
+      as,
+      curLocale,
+      router && router.locales,
+      router.domainLocales,
+    )
+
+    if (localeDomain) {
+      canonical = localeDomain
+    } else {
+      href = addBasePath(addLocale(as, curLocale, router.defaultLocale))
+
+      let siteUrl =
+        storefrontConfig(router.locale)?.canonicalBaseUrl ||
+        import.meta.graphCommerce.canonicalBaseUrl
+      if (siteUrl.endsWith('/')) siteUrl = siteUrl.slice(0, -1)
+
+      canonical = `${siteUrl}${href}`
+    }
   }
 
   if (!canonical.startsWith('http')) {