Both for comparison

app/product-redirect/[handle]/page.tsx

@@ -0,0 +1,143 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { Suspense } from 'react';
+
+import { GridTileImage } from 'components/grid/tile';
+import Footer from 'components/layout/footer';
+import { Gallery } from 'components/product/gallery';
+import { ProductDescription } from 'components/product/product-description-redirect';
+import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
+import { getProduct, getProductRecommendations } from 'lib/shopify';
+import { Image } from 'lib/shopify/types';
+import Link from 'next/link';
+
+export const runtime = 'edge';
+
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string };
+}): Promise<Metadata> {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const { url, width, height, altText: alt } = product.featuredImage || {};
+  const hide = !product.tags.includes(HIDDEN_PRODUCT_TAG);
+
+  return {
+    title: product.seo.title || product.title,
+    description: product.seo.description || product.description,
+    robots: {
+      index: hide,
+      follow: hide,
+      googleBot: {
+        index: hide,
+        follow: hide
+      }
+    },
+    openGraph: url
+      ? {
+          images: [
+            {
+              url,
+              width,
+              height,
+              alt
+            }
+          ]
+        }
+      : null
+  };
+}
+
+export default async function ProductPage({ params }: { params: { handle: string } }) {
+  const product = await getProduct(params.handle);
+
+  if (!product) return notFound();
+
+  const productJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    name: product.title,
+    description: product.description,
+    image: product.featuredImage.url,
+    offers: {
+      '@type': 'AggregateOffer',
+      availability: product.availableForSale
+        ? 'https://schema.org/InStock'
+        : 'https://schema.org/OutOfStock',
+      priceCurrency: product.priceRange.minVariantPrice.currencyCode,
+      highPrice: product.priceRange.maxVariantPrice.amount,
+      lowPrice: product.priceRange.minVariantPrice.amount
+    }
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(productJsonLd)
+        }}
+      />
+      <div className="mx-auto max-w-screen-2xl px-4">
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+          <div className="lg:col-span-4">
+            <Gallery
+              images={product.images.map((image: Image) => ({
+                src: image.url,
+                altText: image.altText
+              }))}
+            />
+          </div>
+
+          <div className="py-6 pr-8 md:pr-12 lg:col-span-2">
+            <ProductDescription product={product} />
+          </div>
+        </div>
+        <Suspense>
+          <RelatedProducts id={product.id} />
+        </Suspense>
+      </div>
+      <Suspense>
+        <Footer />
+      </Suspense>
+    </>
+  );
+}
+
+async function RelatedProducts({ id }: { id: string }) {
+  const relatedProducts = await getProductRecommendations(id);
+
+  if (!relatedProducts.length) return null;
+
+  return (
+    <div className="py-8">
+      <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
+      <div className="flex w-full gap-4 overflow-x-auto pt-1">
+        {relatedProducts.map((product, i) => {
+          return (
+            <Link
+              key={i}
+              className="w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
+              href={`/product/${product.handle}`}
+            >
+              <GridTileImage
+                alt={product.title}
+                label={{
+                  title: product.title,
+                  amount: product.priceRange.maxVariantPrice.amount,
+                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
+                }}
+                src={product.featuredImage?.url}
+                width={600}
+                height={600}
+              />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

components/product/product-description-redirect.tsx

@@ -0,0 +1,31 @@
+import { AddToCart } from 'components/cart/add-to-cart';
+import Price from 'components/price';
+import Prose from 'components/prose';
+import { Product } from 'lib/shopify/types';
+import { VariantSelector } from './variant-selector-redirect';
+
+export function ProductDescription({ product }: { product: Product }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
+        <h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
+        <div className="mr-auto w-auto rounded-full bg-blue-600 p-2 text-sm text-white">
+          <Price
+            amount={product.priceRange.maxVariantPrice.amount}
+            currencyCode={product.priceRange.maxVariantPrice.currencyCode}
+          />
+        </div>
+      </div>
+      <VariantSelector options={product.options} variants={product.variants} />
+
+      {product.descriptionHtml ? (
+        <Prose
+          className="mb-6 text-sm leading-tight dark:text-white/[60%]"
+          html={product.descriptionHtml}
+        />
+      ) : null}
+
+      <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+    </>
+  );
+}

components/product/variant-selector-redirect.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import clsx from 'clsx';
+import { ProductOption, ProductVariant } from 'lib/shopify/types';
+import { createUrl } from 'lib/utils';
+import Link from 'next/link';
+import { redirect, usePathname, useSearchParams } from 'next/navigation';
+
+type ParamsMap = {
+  [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
+};
+
+type OptimizedVariant = {
+  id: string;
+  availableForSale: boolean;
+  params: URLSearchParams;
+  [key: string]: string | boolean | URLSearchParams; // ie. { color: 'Red', size: 'Large', ... }
+};
+
+export function VariantSelector({
+  options,
+  variants
+}: {
+  options: ProductOption[];
+  variants: ProductVariant[];
+}) {
+  const pathname = usePathname();
+  const currentParams = useSearchParams();
+  const hasNoOptionsOrJustOneOption =
+    !options.length || (options.length === 1 && options[0]?.values.length === 1);
+
+  if (hasNoOptionsOrJustOneOption) {
+    return null;
+  }
+
+  // Discard any unexpected options or values from url and create params map.
+  const paramsMap: ParamsMap = Object.fromEntries(
+    Array.from(currentParams.entries()).filter(([key, value]) =>
+      options.find((option) => option.name.toLowerCase() === key && option.values.includes(value))
+    )
+  );
+
+  // Optimize variants for easier lookups.
+  const optimizedVariants: OptimizedVariant[] = variants.map((variant) => {
+    const optimized: OptimizedVariant = {
+      id: variant.id,
+      availableForSale: variant.availableForSale,
+      params: new URLSearchParams()
+    };
+
+    variant.selectedOptions.forEach((selectedOption) => {
+      const name = selectedOption.name.toLowerCase();
+      const value = selectedOption.value;
+
+      optimized[name] = value;
+      optimized.params.set(name, value);
+    });
+
+    return optimized;
+  });
+
+  // Find the first variant that is:
+  //
+  // 1. Available for sale
+  // 2. Matches all options specified in the url (note that this
+  //    could be a partial match if some options are missing from the url).
+  //
+  // If no match (full or partial) is found, use the first variant that is
+  // available for sale.
+  const selectedVariant: OptimizedVariant | undefined =
+    optimizedVariants.find(
+      (variant) =>
+        variant.availableForSale &&
+        Object.entries(paramsMap).every(([key, value]) => variant[key] === value)
+    ) || optimizedVariants.find((variant) => variant.availableForSale);
+
+  const selectedVariantParams = new URLSearchParams(selectedVariant?.params);
+  const currentUrl = createUrl(pathname, currentParams);
+  const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
+
+  console.log('currentUrl', currentUrl);
+  console.log('selectedVariantUrl', selectedVariantUrl);
+  if (currentUrl !== selectedVariantUrl) {
+    console.log('CHANGING URL!!! -- redirect');
+    redirect(selectedVariantUrl);
+  }
+
+  return options.map((option) => (
+    <dl className="mb-8" key={option.id}>
+      <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
+      <dd className="flex flex-wrap gap-3">
+        {option.values.map((value) => {
+          // Base option params on selected variant params.
+          const optionParams = new URLSearchParams(selectedVariantParams);
+          // Update the params using the current option to reflect how the url would change.
+          optionParams.set(option.name.toLowerCase(), value);
+
+          const optionUrl = createUrl(pathname, optionParams);
+
+          // The option is active if it in the url params.
+          const isActive = selectedVariantParams.get(option.name.toLowerCase()) === value;
+
+          // The option is available for sale if it fully matches the variant in the option's url params.
+          // It's super important to note that this is the options params, *not* the selected variant's params.
+          // This is the "magic" that will cross check possible future variant combinations and preemptively
+          // disable combinations that are not possible.
+          const isAvailableForSale = optimizedVariants.find((a) =>
+            Array.from(optionParams.entries()).every(([key, value]) => a[key] === value)
+          )?.availableForSale;
+
+          const DynamicTag = isAvailableForSale ? Link : 'p';
+          const dynamicProps = {
+            ...(isAvailableForSale && { scroll: false })
+          };
+
+          return (
+            <DynamicTag
+              key={value}
+              aria-disabled={!isAvailableForSale}
+              href={optionUrl}
+              title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
+              className={clsx(
+                'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
+                {
+                  'cursor-default ring-2 ring-blue-600': isActive,
+                  'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ':
+                    !isActive && isAvailableForSale,
+                  'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
+                    !isAvailableForSale
+                }
+              )}
+              {...dynamicProps}
+            >
+              {value}
+            </DynamicTag>
+          );
+        })}
+      </dd>
+    </dl>
+  ));
+}

components/product/variant-selector.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
-import { redirect, usePathname, useSearchParams } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 type ParamsMap = {
   [key: string]: string; // ie. { color: 'Red', size: 'Large', ... }
@@ -26,6 +26,7 @@ export function VariantSelector({
 }) {
   const pathname = usePathname();
   const currentParams = useSearchParams();
+  const router = useRouter();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -78,8 +79,11 @@ export function VariantSelector({
   const currentUrl = createUrl(pathname, currentParams);
   const selectedVariantUrl = createUrl(pathname, selectedVariantParams);
 
+  console.log('currentUrl', currentUrl);
+  console.log('selectedVariantUrl', selectedVariantUrl);
   if (currentUrl !== selectedVariantUrl) {
-    redirect(selectedVariantUrl);
+    console.log('CHANGING URL!!! -- router.replace');
+    router.replace(selectedVariantUrl);
   }
 
   return options.map((option) => (