add layout keying

remove full prefetch on search page
update next to https://github.com/vercel/next.js/pull/68340/
2024-08-01 10:24:50 -07:00 · 2024-08-01 10:14:47 -07:00 · 2024-07-31 16:57:21 +02:00 · 2024-07-30 17:19:38 -05:00
46 changed files with 1580 additions and 1129 deletions
--- a/.env.example
+++ b/.env.example
@ -1,4 +1,6 @@
 COMPANY_NAME="Vercel Inc."
+TWITTER_CREATOR="@vercel"
+TWITTER_SITE="https://nextjs.org/commerce"
 SITE_NAME="Next.js Commerce"
 SHOPIFY_REVALIDATION_SECRET=""
 SHOPIFY_STOREFRONT_ACCESS_TOKEN=""
--- a/.gitignore
+++ b/.gitignore
@ -36,4 +36,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.env*.local
--- a/README.md
+++ b/README.md
@ -1,8 +1,8 @@
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fcommerce&project-name=commerce&repo-name=commerce&demo-title=Next.js%20Commerce&demo-url=https%3A%2F%2Fdemo.vercel.store&demo-image=https%3A%2F%2Fbigcommerce-demo-asset-ksvtgfvnd.vercel.app%2Fbigcommerce.png&env=COMPANY_NAME,SHOPIFY_REVALIDATION_SECRET,SHOPIFY_STORE_DOMAIN,SHOPIFY_STOREFRONT_ACCESS_TOKEN,SITE_NAME,TWITTER_CREATOR,TWITTER_SITE)

 # Next.js Commerce

-A high-performance, server-rendered Next.js App Router ecommerce application.
+A high-perfomance, server-rendered Next.js App Router ecommerce application.

 This template uses React Server Components, Server Actions, `Suspense`, `useOptimistic`, and more.

@ -19,15 +19,12 @@ Vercel is happy to partner and work with any commerce provider to help them get
 - Shopify (this repository)
 - [BigCommerce](https://github.com/bigcommerce/nextjs-commerce) ([Demo](https://next-commerce-v2.vercel.app/))
 - [Ecwid by Lightspeed](https://github.com/Ecwid/ecwid-nextjs-commerce/) ([Demo](https://ecwid-nextjs-commerce.vercel.app/))
- [Geins](https://github.com/geins-io/vercel-nextjs-commerce) ([Demo](https://geins-nextjs-commerce-starter.vercel.app/))
 - [Medusa](https://github.com/medusajs/vercel-commerce) ([Demo](https://medusa-nextjs-commerce.vercel.app/))
- [Prodigy Commerce](https://github.com/prodigycommerce/nextjs-commerce) ([Demo](https://prodigy-nextjs-commerce.vercel.app/))
 - [Saleor](https://github.com/saleor/nextjs-commerce) ([Demo](https://saleor-commerce.vercel.app/))
 - [Shopware](https://github.com/shopwareLabs/vercel-commerce) ([Demo](https://shopware-vercel-commerce-react.vercel.app/))
 - [Swell](https://github.com/swellstores/verswell-commerce) ([Demo](https://verswell-commerce.vercel.app/))
 - [Umbraco](https://github.com/umbraco/Umbraco.VercelCommerce.Demo) ([Demo](https://vercel-commerce-demo.umbraco.com/))
- [Wix](https://github.com/wix/headless-templates/tree/main/nextjs/commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))
- [Fourthwall](https://github.com/FourthwallHQ/vercel-commerce) ([Demo](https://vercel-storefront.fourthwall.app/))
+- [Wix](https://github.com/wix/nextjs-commerce) ([Demo](https://wix-nextjs-commerce.vercel.app/))

 > Note: Providers, if you are looking to use similar products for your demo, you can [download these assets](https://drive.google.com/file/d/1q_bKerjrwZgHwCw0ovfUMW6He9VtepO_/view?usp=sharing).

@ -36,13 +33,9 @@ Vercel is happy to partner and work with any commerce provider to help them get
 Integrations enable upgraded or additional functionality for Next.js Commerce

 - [Orama](https://github.com/oramasearch/nextjs-commerce) ([Demo](https://vercel-commerce.oramasearch.com/))
-
  - Upgrades search to include typeahead with dynamic re-rendering, vector-based similarity search, and JS-based configuration.
  - Search runs entirely in the browser for smaller catalogs or on a CDN for larger.

- [React Bricks](https://github.com/ReactBricks/nextjs-commerce-rb) ([Demo](https://nextjs-commerce.reactbricks.com/))
-  - Edit pages, product details, and footer content visually using [React Bricks](https://www.reactbricks.com) visual headless CMS.
-
 ## Running locally

 You will need to use the environment variables [defined in `.env.example`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/environment-variables) for this, but a `.env` file is all that is necessary.
--- a/app/[page]/opengraph-image.tsx
+++ b/app/[page]/opengraph-image.tsx
@ -1,6 +1,8 @@
 import OpengraphImage from 'components/opengraph-image';
 import { getPage } from 'lib/shopify';

+export const runtime = 'edge';
+
 export default async function Image({ params }: { params: { page: string } }) {
  const page = await getPage(params.page);
  const title = page.seo?.title || page.title;
--- a/app/[page]/page.tsx
+++ b/app/[page]/page.tsx
@ -4,10 +4,11 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';

-export async function generateMetadata(props: {
-  params: Promise<{ page: string }>;
+export async function generateMetadata({
+  params
+}: {
+  params: { page: string };
 }): Promise<Metadata> {
-  const params = await props.params;
  const page = await getPage(params.page);

  if (!page) return notFound();
@ -23,8 +24,7 @@ export async function generateMetadata(props: {
  };
 }

-export default async function Page(props: { params: Promise<{ page: string }> }) {
-  const params = await props.params;
+export default async function Page({ params }: { params: { page: string } }) {
  const page = await getPage(params.page);

  if (!page) return notFound();
@ -32,7 +32,7 @@ export default async function Page(props: { params: Promise<{ page: string }> })
  return (
    <>
      <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body} />
+      <Prose className="mb-8" html={page.body as string} />
      <p className="text-sm italic">
        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
          year: 'numeric',
--- a/app/globals.css
+++ b/app/globals.css
@ -1,17 +1,6 @@
-@import 'tailwindcss';
-
-@plugin "@tailwindcss/container-queries";
-@plugin "@tailwindcss/typography";
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

@media (prefers-color-scheme: dark) {
  html {
@ -28,5 +17,5 @@
 a,
 input,
 button {
-  @apply focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
+  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -3,12 +3,18 @@ import { Navbar } from 'components/layout/navbar';
 import { WelcomeToast } from 'components/welcome-toast';
 import { GeistSans } from 'geist/font/sans';
 import { getCart } from 'lib/shopify';
+import { ensureStartsWith } from 'lib/utils';
+import { cookies } from 'next/headers';
 import { ReactNode } from 'react';
 import { Toaster } from 'sonner';
 import './globals.css';
-import { baseUrl } from 'lib/utils';

-const { SITE_NAME } = process.env;
+const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
+const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;

 export const metadata = {
  metadataBase: new URL(baseUrl),
@ -19,16 +25,21 @@ export const metadata = {
  robots: {
    follow: true,
    index: true
-  }
+  },
+  ...(twitterCreator &&
+    twitterSite && {
+      twitter: {
+        card: 'summary_large_image',
+        creator: twitterCreator,
+        site: twitterSite
+      }
+    })
 };

-export default async function RootLayout({
-  children
-}: {
-  children: ReactNode;
-}) {
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const cartId = cookies().get('cartId')?.value;
  // Don't await the fetch, pass the Promise to the context provider
-  const cart = getCart();
+  const cart = getCart(cartId);

  return (
    <html lang="en" className={GeistSans.variable}>
--- a/app/opengraph-image.tsx
+++ b/app/opengraph-image.tsx
@ -1,5 +1,7 @@
 import OpengraphImage from 'components/opengraph-image';

+export const runtime = 'edge';
+
 export default async function Image() {
  return await OpengraphImage();
 }
--- a/app/page.tsx
+++ b/app/page.tsx
@ -3,8 +3,7 @@ import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';

 export const metadata = {
-  description:
-    'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
+  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
  openGraph: {
    type: 'website'
  }
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@ -12,10 +12,11 @@ import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';

-export async function generateMetadata(props: {
-  params: Promise<{ handle: string }>;
+export async function generateMetadata({
+  params
+}: {
+  params: { handle: string };
 }): Promise<Metadata> {
-  const params = await props.params;
  const product = await getProduct(params.handle);

  if (!product) return notFound();
@ -49,8 +50,7 @@ export async function generateMetadata(props: {
  };
 }

-export default async function ProductPage(props: { params: Promise<{ handle: string }> }) {
-  const params = await props.params;
+export default async function ProductPage({ params }: { params: { handle: string } }) {
  const product = await getProduct(params.handle);

  if (!product) return notFound();
@ -80,7 +80,7 @@ export default async function ProductPage(props: { params: Promise<{ handle: str
          __html: JSON.stringify(productJsonLd)
        }}
      />
-      <div className="mx-auto max-w-(--breakpoint-2xl) px-4">
+      <div className="mx-auto max-w-screen-2xl px-4">
        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
          <div className="h-full w-full basis-full lg:basis-4/6">
            <Suspense
--- a/app/robots.ts
+++ b/app/robots.ts
@ -1,4 +1,6 @@
-import { baseUrl } from 'lib/utils';
+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';

 export default function robots() {
  return {
--- a/app/search/[collection]/opengraph-image.tsx
+++ b/app/search/[collection]/opengraph-image.tsx
@ -1,11 +1,9 @@
 import OpengraphImage from 'components/opengraph-image';
 import { getCollection } from 'lib/shopify';

-export default async function Image({
-  params
-}: {
-  params: { collection: string };
-}) {
+export const runtime = 'edge';
+
+export default async function Image({ params }: { params: { collection: string } }) {
  const collection = await getCollection(params.collection);
  const title = collection?.seo?.title || collection?.title;

--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@ -6,10 +6,11 @@ import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';

-export async function generateMetadata(props: {
-  params: Promise<{ collection: string }>;
+export async function generateMetadata({
+  params
+}: {
+  params: { collection: string };
 }): Promise<Metadata> {
-  const params = await props.params;
  const collection = await getCollection(params.collection);

  if (!collection) return notFound();
@ -21,12 +22,13 @@ export async function generateMetadata(props: {
  };
 }

-export default async function CategoryPage(props: {
-  params: Promise<{ collection: string }>;
-  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+export default async function CategoryPage({
+  params,
+  searchParams
+}: {
+  params: { collection: string };
+  searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const searchParams = await props.searchParams;
-  const params = await props.params;
  const { sort } = searchParams as { [key: string]: string };
  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
  const products = await getCollectionProducts({ collection: params.collection, sortKey, reverse });
--- a/app/search/children-wrapper.tsx
+++ b/app/search/children-wrapper.tsx
@ -1,9 +1,7 @@
 'use client';
-
 import { useSearchParams } from 'next/navigation';
 import { Fragment } from 'react';

-// Ensure children are re-rendered when the search query changes
 export default function ChildrenWrapper({ children }: { children: React.ReactNode }) {
  const searchParams = useSearchParams();
  return <Fragment key={searchParams.get('q')}>{children}</Fragment>;
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@ -3,23 +3,16 @@ import Collections from 'components/layout/search/collections';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
 import ChildrenWrapper from './children-wrapper';
-import { Suspense } from 'react';

-export default function SearchLayout({
-  children
-}: {
-  children: React.ReactNode;
-}) {
+export default function SearchLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
-      <div className="mx-auto flex max-w-(--breakpoint-2xl) flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
        <div className="order-first w-full flex-none md:max-w-[125px]">
          <Collections />
        </div>
        <div className="order-last min-h-screen w-full md:order-none">
-          <Suspense fallback={null}>
-            <ChildrenWrapper>{children}</ChildrenWrapper>
-          </Suspense>
+          <ChildrenWrapper>{children}</ChildrenWrapper>
        </div>
        <div className="order-none flex-none md:order-last md:w-[125px]">
          <FilterList list={sorting} title="Sort by" />
--- a/app/search/loading.tsx
+++ b/app/search/loading.tsx
@ -2,17 +2,14 @@ import Grid from 'components/grid';

 export default function Loading() {
  return (
-    <>
-      <div className="mb-4 h-6" />
-      <Grid className="grid-cols-2 lg:grid-cols-3">
-        {Array(12)
-          .fill(0)
-          .map((_, index) => {
-            return (
-              <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
-            );
-          })}
-      </Grid>
-    </>
+    <Grid className="grid-cols-2 lg:grid-cols-3">
+      {Array(12)
+        .fill(0)
+        .map((_, index) => {
+          return (
+            <Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-800" />
+          );
+        })}
+    </Grid>
  );
 }
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@ -8,10 +8,11 @@ export const metadata = {
  description: 'Search for products in the store.'
 };

-export default async function SearchPage(props: {
-  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+export default async function SearchPage({
+  searchParams
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const searchParams = await props.searchParams;
  const { sort, q: searchValue } = searchParams as { [key: string]: string };
  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;

--- a/app/sitemap.ts
+++ b/app/sitemap.ts
@ -1,5 +1,5 @@
 import { getCollections, getPages, getProducts } from 'lib/shopify';
-import { baseUrl, validateEnvironmentVariables } from 'lib/utils';
+import { validateEnvironmentVariables } from 'lib/utils';
 import { MetadataRoute } from 'next';

 type Route = {
@ -7,6 +7,10 @@ type Route = {
  lastModified: string;
 };

+const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+  : 'http://localhost:3000';
+
 export const dynamic = 'force-dynamic';

 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
@ -41,9 +45,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  let fetchedRoutes: Route[] = [];

  try {
-    fetchedRoutes = (
-      await Promise.all([collectionsPromise, productsPromise, pagesPromise])
-    ).flat();
+    fetchedRoutes = (await Promise.all([collectionsPromise, productsPromise, pagesPromise])).flat();
  } catch (error) {
    throw JSON.stringify(error, null, 2);
  }
--- a/components/cart/actions.ts
+++ b/components/cart/actions.ts
@ -1,27 +1,20 @@
 'use server';

 import { TAGS } from 'lib/constants';
-import {
-  addToCart,
-  createCart,
-  getCart,
-  removeFromCart,
-  updateCart
-} from 'lib/shopify';
+import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
 import { revalidateTag } from 'next/cache';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';

-export async function addItem(
-  prevState: any,
-  selectedVariantId: string | undefined
-) {
-  if (!selectedVariantId) {
+export async function addItem(prevState: any, selectedVariantId: string | undefined) {
+  let cartId = cookies().get('cartId')?.value;
+
+  if (!cartId || !selectedVariantId) {
    return 'Error adding item to cart';
  }

  try {
-    await addToCart([{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    await addToCart(cartId, [{ merchandiseId: selectedVariantId, quantity: 1 }]);
    revalidateTag(TAGS.cart);
  } catch (e) {
    return 'Error adding item to cart';
@ -29,19 +22,23 @@ export async function addItem(
 }

 export async function removeItem(prevState: any, merchandiseId: string) {
+  let cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
  try {
-    const cart = await getCart();
+    const cart = await getCart(cartId);

    if (!cart) {
      return 'Error fetching cart';
    }

-    const lineItem = cart.lines.find(
-      (line) => line.merchandise.id === merchandiseId
-    );
+    const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);

    if (lineItem && lineItem.id) {
-      await removeFromCart([lineItem.id]);
+      await removeFromCart(cartId, [lineItem.id]);
      revalidateTag(TAGS.cart);
    } else {
      return 'Item not found in cart';
@ -58,24 +55,28 @@ export async function updateItemQuantity(
    quantity: number;
  }
 ) {
+  let cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
  const { merchandiseId, quantity } = payload;

  try {
-    const cart = await getCart();
+    const cart = await getCart(cartId);

    if (!cart) {
      return 'Error fetching cart';
    }

-    const lineItem = cart.lines.find(
-      (line) => line.merchandise.id === merchandiseId
-    );
+    const lineItem = cart.lines.find((line) => line.merchandise.id === merchandiseId);

    if (lineItem && lineItem.id) {
      if (quantity === 0) {
-        await removeFromCart([lineItem.id]);
+        await removeFromCart(cartId, [lineItem.id]);
      } else {
-        await updateCart([
+        await updateCart(cartId, [
          {
            id: lineItem.id,
            merchandiseId,
@ -85,7 +86,7 @@ export async function updateItemQuantity(
      }
    } else if (quantity > 0) {
      // If the item doesn't exist in the cart and quantity > 0, add it
-      await addToCart([{ merchandiseId, quantity }]);
+      await addToCart(cartId, [{ merchandiseId, quantity }]);
    }

    revalidateTag(TAGS.cart);
@ -96,11 +97,22 @@ export async function updateItemQuantity(
 }

 export async function redirectToCheckout() {
-  let cart = await getCart();
-  redirect(cart!.checkoutUrl);
+  let cartId = cookies().get('cartId')?.value;
+
+  if (!cartId) {
+    return 'Missing cart ID';
+  }
+
+  let cart = await getCart(cartId);
+
+  if (!cart) {
+    return 'Error fetching cart';
+  }
+
+  redirect(cart.checkoutUrl);
 }

 export async function createCartAndSetCookie() {
  let cart = await createCart();
-  (await cookies()).set('cartId', cart.id!);
+  cookies().set('cartId', cart.id!);
 }
--- a/components/cart/add-to-cart.tsx
+++ b/components/cart/add-to-cart.tsx
@ -5,7 +5,7 @@ import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
 import { useProduct } from 'components/product/product-context';
 import { Product, ProductVariant } from 'lib/shopify/types';
-import { useActionState } from 'react';
+import { useFormState } from 'react-dom';
 import { useCart } from './cart-context';

 function SubmitButton({
@ -27,6 +27,7 @@ function SubmitButton({
    );
  }

+  console.log(selectedVariantId);
  if (!selectedVariantId) {
    return (
      <button
@ -61,31 +62,24 @@ export function AddToCart({ product }: { product: Product }) {
  const { variants, availableForSale } = product;
  const { addCartItem } = useCart();
  const { state } = useProduct();
-  const [message, formAction] = useActionState(addItem, null);
+  const [message, formAction] = useFormState(addItem, null);

  const variant = variants.find((variant: ProductVariant) =>
-    variant.selectedOptions.every(
-      (option) => option.value === state[option.name.toLowerCase()]
-    )
+    variant.selectedOptions.every((option) => option.value === state[option.name.toLowerCase()])
  );
  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
  const selectedVariantId = variant?.id || defaultVariantId;
-  const addItemAction = formAction.bind(null, selectedVariantId);
-  const finalVariant = variants.find(
-    (variant) => variant.id === selectedVariantId
-  )!;
+  const actionWithVariant = formAction.bind(null, selectedVariantId);
+  const finalVariant = variants.find((variant) => variant.id === selectedVariantId)!;

  return (
    <form
      action={async () => {
        addCartItem(finalVariant, product);
-        addItemAction();
+        await actionWithVariant();
      }}
    >
-      <SubmitButton
-        availableForSale={availableForSale}
-        selectedVariantId={selectedVariantId}
-      />
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
      <p aria-live="polite" className="sr-only" role="status">
        {message}
      </p>
--- a/components/cart/cart-context.tsx
+++ b/components/cart/cart-context.tsx
@ -1,33 +1,18 @@
 'use client';

-import type {
-  Cart,
-  CartItem,
-  Product,
-  ProductVariant
-} from 'lib/shopify/types';
-import React, {
-  createContext,
-  use,
-  useContext,
-  useMemo,
-  useOptimistic
-} from 'react';
+import type { Cart, CartItem, Product, ProductVariant } from 'lib/shopify/types';
+import React, { createContext, use, useContext, useMemo, useOptimistic } from 'react';

 type UpdateType = 'plus' | 'minus' | 'delete';

 type CartAction =
-  | {
-      type: 'UPDATE_ITEM';
-      payload: { merchandiseId: string; updateType: UpdateType };
-    }
-  | {
-      type: 'ADD_ITEM';
-      payload: { variant: ProductVariant; product: Product };
-    };
+  | { type: 'UPDATE_ITEM'; payload: { merchandiseId: string; updateType: UpdateType } }
+  | { type: 'ADD_ITEM'; payload: { variant: ProductVariant; product: Product } };

 type CartContextType = {
-  cartPromise: Promise<Cart | undefined>;
+  cart: Cart | undefined;
+  updateCartItem: (merchandiseId: string, updateType: UpdateType) => void;
+  addCartItem: (variant: ProductVariant, product: Product) => void;
 };

 const CartContext = createContext<CartContextType | undefined>(undefined);
@ -36,21 +21,14 @@ function calculateItemCost(quantity: number, price: string): string {
  return (Number(price) * quantity).toString();
 }

-function updateCartItem(
-  item: CartItem,
-  updateType: UpdateType
-): CartItem | null {
+function updateCartItem(item: CartItem, updateType: UpdateType): CartItem | null {
  if (updateType === 'delete') return null;

-  const newQuantity =
-    updateType === 'plus' ? item.quantity + 1 : item.quantity - 1;
+  const newQuantity = updateType === 'plus' ? item.quantity + 1 : item.quantity - 1;
  if (newQuantity === 0) return null;

  const singleItemAmount = Number(item.cost.totalAmount.amount) / item.quantity;
-  const newTotalAmount = calculateItemCost(
-    newQuantity,
-    singleItemAmount.toString()
-  );
+  const newTotalAmount = calculateItemCost(newQuantity, singleItemAmount.toString());

  return {
    ...item,
@ -96,14 +74,9 @@ function createOrUpdateCartItem(
  };
 }

-function updateCartTotals(
-  lines: CartItem[]
-): Pick<Cart, 'totalQuantity' | 'cost'> {
+function updateCartTotals(lines: CartItem[]): Pick<Cart, 'totalQuantity' | 'cost'> {
  const totalQuantity = lines.reduce((sum, item) => sum + item.quantity, 0);
-  const totalAmount = lines.reduce(
-    (sum, item) => sum + Number(item.cost.totalAmount.amount),
-    0
-  );
+  const totalAmount = lines.reduce((sum, item) => sum + Number(item.cost.totalAmount.amount), 0);
  const currencyCode = lines[0]?.cost.totalAmount.currencyCode ?? 'USD';

  return {
@ -138,9 +111,7 @@ function cartReducer(state: Cart | undefined, action: CartAction): Cart {
      const { merchandiseId, updateType } = action.payload;
      const updatedLines = currentCart.lines
        .map((item) =>
-          item.merchandise.id === merchandiseId
-            ? updateCartItem(item, updateType)
-            : item
+          item.merchandise.id === merchandiseId ? updateCartItem(item, updateType) : item
        )
        .filter(Boolean) as CartItem[];

@ -156,34 +127,18 @@ function cartReducer(state: Cart | undefined, action: CartAction): Cart {
        };
      }

-      return {
-        ...currentCart,
-        ...updateCartTotals(updatedLines),
-        lines: updatedLines
-      };
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
    }
    case 'ADD_ITEM': {
      const { variant, product } = action.payload;
-      const existingItem = currentCart.lines.find(
-        (item) => item.merchandise.id === variant.id
-      );
-      const updatedItem = createOrUpdateCartItem(
-        existingItem,
-        variant,
-        product
-      );
+      const existingItem = currentCart.lines.find((item) => item.merchandise.id === variant.id);
+      const updatedItem = createOrUpdateCartItem(existingItem, variant, product);

      const updatedLines = existingItem
-        ? currentCart.lines.map((item) =>
-            item.merchandise.id === variant.id ? updatedItem : item
-          )
+        ? currentCart.lines.map((item) => (item.merchandise.id === variant.id ? updatedItem : item))
        : [...currentCart.lines, updatedItem];

-      return {
-        ...currentCart,
-        ...updateCartTotals(updatedLines),
-        lines: updatedLines
-      };
+      return { ...currentCart, ...updateCartTotals(updatedLines), lines: updatedLines };
    }
    default:
      return currentCart;
@ -197,37 +152,18 @@ export function CartProvider({
  children: React.ReactNode;
  cartPromise: Promise<Cart | undefined>;
 }) {
-  return (
-    <CartContext.Provider value={{ cartPromise }}>
-      {children}
-    </CartContext.Provider>
-  );
-}
-
-export function useCart() {
-  const context = useContext(CartContext);
-  if (context === undefined) {
-    throw new Error('useCart must be used within a CartProvider');
-  }
-
-  const initialCart = use(context.cartPromise);
-  const [optimisticCart, updateOptimisticCart] = useOptimistic(
-    initialCart,
-    cartReducer
-  );
+  const initialCart = use(cartPromise);
+  const [optimisticCart, updateOptimisticCart] = useOptimistic(initialCart, cartReducer);

  const updateCartItem = (merchandiseId: string, updateType: UpdateType) => {
-    updateOptimisticCart({
-      type: 'UPDATE_ITEM',
-      payload: { merchandiseId, updateType }
-    });
+    updateOptimisticCart({ type: 'UPDATE_ITEM', payload: { merchandiseId, updateType } });
  };

  const addCartItem = (variant: ProductVariant, product: Product) => {
    updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product } });
  };

-  return useMemo(
+  const value = useMemo(
    () => ({
      cart: optimisticCart,
      updateCartItem,
@ -235,4 +171,14 @@ export function useCart() {
    }),
    [optimisticCart]
  );
+
+  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
+}
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (context === undefined) {
+    throw new Error('useCart must be used within a CartProvider');
+  }
+  return context;
 }
--- a/components/cart/close-cart.tsx
+++ b/components/cart/close-cart.tsx
@ -0,0 +1,10 @@
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function CloseCart({ className }: { className?: string }) {
+  return (
+    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
+      <XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110', className)} />
+    </div>
+  );
+}
--- a/components/cart/delete-item-button.tsx
+++ b/components/cart/delete-item-button.tsx
@ -3,7 +3,7 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { removeItem } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
-import { useActionState } from 'react';
+import { useFormState } from 'react-dom';

 export function DeleteItemButton({
  item,
@ -12,15 +12,15 @@ export function DeleteItemButton({
  item: CartItem;
  optimisticUpdate: any;
 }) {
-  const [message, formAction] = useActionState(removeItem, null);
+  const [message, formAction] = useFormState(removeItem, null);
  const merchandiseId = item.merchandise.id;
-  const removeItemAction = formAction.bind(null, merchandiseId);
+  const actionWithVariant = formAction.bind(null, merchandiseId);

  return (
    <form
      action={async () => {
        optimisticUpdate(merchandiseId, 'delete');
-        removeItemAction();
+        await actionWithVariant();
      }}
    >
      <button
--- a/components/cart/edit-item-quantity-button.tsx
+++ b/components/cart/edit-item-quantity-button.tsx
@ -4,15 +4,13 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { updateItemQuantity } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
-import { useActionState } from 'react';
+import { useFormState } from 'react-dom';

 function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
  return (
    <button
      type="submit"
-      aria-label={
-        type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'
-      }
+      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
      className={clsx(
        'ease flex h-full min-w-[36px] max-w-[36px] flex-none items-center justify-center rounded-full p-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
        {
@ -38,18 +36,18 @@ export function EditItemQuantityButton({
  type: 'plus' | 'minus';
  optimisticUpdate: any;
 }) {
-  const [message, formAction] = useActionState(updateItemQuantity, null);
+  const [message, formAction] = useFormState(updateItemQuantity, null);
  const payload = {
    merchandiseId: item.merchandise.id,
    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
  };
-  const updateItemQuantityAction = formAction.bind(null, payload);
+  const actionWithVariant = formAction.bind(null, payload);

  return (
    <form
      action={async () => {
        optimisticUpdate(payload.merchandiseId, type);
-        updateItemQuantityAction();
+        await actionWithVariant();
      }}
    >
      <SubmitButton type={type} />
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@ -1,8 +1,7 @@
 'use client';

-import clsx from 'clsx';
 import { Dialog, Transition } from '@headlessui/react';
-import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { ShoppingCartIcon } from '@heroicons/react/24/outline';
 import LoadingDots from 'components/loading-dots';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
@ -13,6 +12,7 @@ import { Fragment, useEffect, useRef, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { createCartAndSetCookie, redirectToCheckout } from './actions';
 import { useCart } from './cart-context';
+import CloseCart from './close-cart';
 import { DeleteItemButton } from './delete-item-button';
 import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
@ -85,31 +85,23 @@ export default function CartModal() {
              {!cart || cart.lines.length === 0 ? (
                <div className="mt-20 flex w-full flex-col items-center justify-center overflow-hidden">
                  <ShoppingCartIcon className="h-16" />
-                  <p className="mt-6 text-center text-2xl font-bold">
-                    Your cart is empty.
-                  </p>
+                  <p className="mt-6 text-center text-2xl font-bold">Your cart is empty.</p>
                </div>
              ) : (
                <div className="flex h-full flex-col justify-between overflow-hidden p-1">
-                  <ul className="grow overflow-auto py-4">
+                  <ul className="flex-grow overflow-auto py-4">
                    {cart.lines
                      .sort((a, b) =>
-                        a.merchandise.product.title.localeCompare(
-                          b.merchandise.product.title
-                        )
+                        a.merchandise.product.title.localeCompare(b.merchandise.product.title)
                      )
                      .map((item, i) => {
-                        const merchandiseSearchParams =
-                          {} as MerchandiseSearchParams;
+                        const merchandiseSearchParams = {} as MerchandiseSearchParams;

-                        item.merchandise.selectedOptions.forEach(
-                          ({ name, value }) => {
-                            if (value !== DEFAULT_OPTION) {
-                              merchandiseSearchParams[name.toLowerCase()] =
-                                value;
-                            }
+                        item.merchandise.selectedOptions.forEach(({ name, value }) => {
+                          if (value !== DEFAULT_OPTION) {
+                            merchandiseSearchParams[name.toLowerCase()] = value;
                          }
-                        );
+                        });

                        const merchandiseUrl = createUrl(
                          `/product/${item.merchandise.product.handle}`,
@ -123,10 +115,7 @@ export default function CartModal() {
                          >
                            <div className="relative flex w-full flex-row justify-between px-1 py-4">
                              <div className="absolute z-40 -ml-1 -mt-2">
-                                <DeleteItemButton
-                                  item={item}
-                                  optimisticUpdate={updateCartItem}
-                                />
+                                <DeleteItemButton item={item} optimisticUpdate={updateCartItem} />
                              </div>
                              <div className="flex flex-row">
                                <div className="relative h-16 w-16 overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
@ -135,13 +124,10 @@ export default function CartModal() {
                                    width={64}
                                    height={64}
                                    alt={
-                                      item.merchandise.product.featuredImage
-                                        .altText ||
+                                      item.merchandise.product.featuredImage.altText ||
                                      item.merchandise.product.title
                                    }
-                                    src={
-                                      item.merchandise.product.featuredImage.url
-                                    }
+                                    src={item.merchandise.product.featuredImage.url}
                                  />
                                </div>
                                <Link
@ -153,8 +139,7 @@ export default function CartModal() {
                                    <span className="leading-tight">
                                      {item.merchandise.product.title}
                                    </span>
-                                    {item.merchandise.title !==
-                                    DEFAULT_OPTION ? (
+                                    {item.merchandise.title !== DEFAULT_OPTION ? (
                                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
                                        {item.merchandise.title}
                                      </p>
@ -166,9 +151,7 @@ export default function CartModal() {
                                <Price
                                  className="flex justify-end space-y-2 text-right text-sm"
                                  amount={item.cost.totalAmount.amount}
-                                  currencyCode={
-                                    item.cost.totalAmount.currencyCode
-                                  }
+                                  currencyCode={item.cost.totalAmount.currencyCode}
                                />
                                <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
                                  <EditItemQuantityButton
@ -177,9 +160,7 @@ export default function CartModal() {
                                    optimisticUpdate={updateCartItem}
                                  />
                                  <p className="w-6 text-center">
-                                    <span className="w-full text-sm">
-                                      {item.quantity}
-                                    </span>
+                                    <span className="w-full text-sm">{item.quantity}</span>
                                  </p>
                                  <EditItemQuantityButton
                                    item={item}
@ -228,19 +209,6 @@ export default function CartModal() {
  );
 }

-function CloseCart({ className }: { className?: string }) {
-  return (
-    <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
-      <XMarkIcon
-        className={clsx(
-          'h-6 transition-all ease-in-out hover:scale-110',
-          className
-        )}
-      />
-    </div>
-  );
-}
-
 function CheckoutButton() {
  const { pending } = useFormStatus();

--- a/components/cart/open-cart.tsx
+++ b/components/cart/open-cart.tsx
@ -15,7 +15,7 @@ export default function OpenCart({
      />

      {quantity ? (
-        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded-sm bg-blue-600 text-[11px] font-medium text-white">
+        <div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-blue-600 text-[11px] font-medium text-white">
          {quantity}
        </div>
      ) : null}
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@ -52,7 +52,7 @@ export async function ThreeItemGrid() {
  const [firstProduct, secondProduct, thirdProduct] = homepageItems;

  return (
-    <section className="mx-auto grid max-w-(--breakpoint-2xl) gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
+    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2 lg:max-h-[calc(100vh-200px)]">
      <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
      <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
      <ThreeItemGridItem size="half" item={thirdProduct} />
--- a/components/label.tsx
+++ b/components/label.tsx
@ -19,7 +19,7 @@ const Label = ({
      })}
    >
      <div className="flex items-center rounded-full border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-md dark:border-neutral-800 dark:bg-black/70 dark:text-white">
-        <h3 className="mr-4 line-clamp-2 grow pl-2 leading-none tracking-tight">{title}</h3>
+        <h3 className="mr-4 line-clamp-2 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
        <Price
          className="flex-none rounded-full bg-blue-600 p-2 text-white"
          amount={amount}
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@ -10,7 +10,7 @@ const { COMPANY_NAME, SITE_NAME } = process.env;
 export default async function Footer() {
  const currentYear = new Date().getFullYear();
  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const skeleton = 'w-full h-6 animate-pulse rounded-sm bg-neutral-200 dark:bg-neutral-700';
+  const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
  const menu = await getMenu('next-js-frontend-footer-menu');
  const copyrightName = COMPANY_NAME || SITE_NAME || '';

--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@ -37,7 +37,7 @@ export async function Navbar() {
                <li key={item.title}>
                  <Link
                    href={item.path}
-                    prefetch={true}
+                    prefetch={item.path === '/search' ? undefined : true}
                    className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
                  >
                    {item.title}
--- a/components/layout/search/collections.tsx
+++ b/components/layout/search/collections.tsx
@ -9,7 +9,7 @@ async function CollectionList() {
  return <FilterList list={collections} title="Collections" />;
 }

-const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded-sm';
+const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
 const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
 const items = 'bg-neutral-400 dark:bg-neutral-700';

--- a/components/layout/search/filter/dropdown.tsx
+++ b/components/layout/search/filter/dropdown.tsx
@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
        onClick={() => {
          setOpenSelect(!openSelect);
        }}
-        className="flex w-full items-center justify-between rounded-sm border border-black/30 px-4 py-2 text-sm dark:border-white/30"
+        className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
      >
        <div>{active}</div>
        <ChevronDownIcon className="h-4" />
--- a/components/opengraph-image.tsx
+++ b/components/opengraph-image.tsx
@ -1,15 +1,11 @@
 import { ImageResponse } from 'next/og';
 import LogoIcon from './icons/logo';
-import { join } from 'path';
-import { readFile } from 'fs/promises';

 export type Props = {
  title?: string;
 };

-export default async function OpengraphImage(
-  props?: Props
-): Promise<ImageResponse> {
+export default async function OpengraphImage(props?: Props): Promise<ImageResponse> {
  const { title } = {
    ...{
      title: process.env.SITE_NAME
@ -17,9 +13,6 @@ export default async function OpengraphImage(
    ...props
  };

-  const file = await readFile(join(process.cwd(), './fonts/Inter-Bold.ttf'));
-  const font = Uint8Array.from(file).buffer;
-
  return new ImageResponse(
    (
      <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
@ -35,7 +28,9 @@ export default async function OpengraphImage(
      fonts: [
        {
          name: 'Inter',
-          data: font,
+          data: await fetch(new URL('../fonts/Inter-Bold.ttf', import.meta.url)).then((res) =>
+            res.arrayBuffer()
+          ),
          style: 'normal',
          weight: 700
        }
--- a/components/product/gallery.tsx
+++ b/components/product/gallery.tsx
@ -32,7 +32,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]

        {images.length > 1 ? (
          <div className="absolute bottom-[15%] flex w-full justify-center">
-            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur-sm dark:border-black dark:bg-neutral-900/80">
+            <div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
              <button
                formAction={() => {
                  const newState = updateImage(previousImageIndex.toString());
@ -60,7 +60,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
      </div>

      {images.length > 1 ? (
-        <ul className="my-12 flex items-center flex-wrap justify-center gap-2 overflow-auto py-1 lg:mb-0">
+        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
          {images.map((image, index) => {
            const isActive = index === imageIndex;

--- a/components/product/variant-selector.tsx
+++ b/components/product/variant-selector.tsx
@ -77,7 +77,7 @@ export function VariantSelector({
                    'cursor-default ring-2 ring-blue-600': isActive,
                    'ring-1 ring-transparent transition duration-300 ease-in-out 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 dark:before:bg-neutral-700':
+                    '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
                  }
                )}
--- a/components/prose.tsx
+++ b/components/prose.tsx
@ -1,13 +1,19 @@
 import clsx from 'clsx';
+import type { FunctionComponent } from 'react';

-const Prose = ({ html, className }: { html: string; className?: string }) => {
+interface TextProps {
+  html: string;
+  className?: string;
+}
+
+const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
  return (
    <div
      className={clsx(
-        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline prose-a:hover:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
+        'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
        className
      )}
-      dangerouslySetInnerHTML={{ __html: html }}
+      dangerouslySetInnerHTML={{ __html: html as string }}
    />
  );
 };
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@ -1,16 +1,8 @@
-import {
-  HIDDEN_PRODUCT_TAG,
-  SHOPIFY_GRAPHQL_API_ENDPOINT,
-  TAGS
-} from 'lib/constants';
+import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
 import { isShopifyError } from 'lib/type-guards';
 import { ensureStartsWith } from 'lib/utils';
-import {
-  revalidateTag,
-  unstable_cacheTag as cacheTag,
-  unstable_cacheLife as cacheLife
-} from 'next/cache';
-import { cookies, headers } from 'next/headers';
+import { revalidateTag } from 'next/cache';
+import { headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 import {
  addToCartMutation,
@ -64,17 +56,19 @@ const domain = process.env.SHOPIFY_STORE_DOMAIN
 const endpoint = `${domain}${SHOPIFY_GRAPHQL_API_ENDPOINT}`;
 const key = process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN!;

-type ExtractVariables<T> = T extends { variables: object }
-  ? T['variables']
-  : never;
+type ExtractVariables<T> = T extends { variables: object } ? T['variables'] : never;

 export async function shopifyFetch<T>({
+  cache = 'force-cache',
  headers,
  query,
+  tags,
  variables
 }: {
+  cache?: RequestCache;
  headers?: HeadersInit;
  query: string;
+  tags?: string[];
  variables?: ExtractVariables<T>;
 }): Promise<{ status: number; body: T } | never> {
  try {
@ -88,7 +82,9 @@ export async function shopifyFetch<T>({
      body: JSON.stringify({
        ...(query && { query }),
        ...(variables && { variables })
-      })
+      }),
+      cache,
+      ...(tags && { next: { tags } })
    });

    const body = await result.json();
@ -126,7 +122,7 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
  if (!cart.cost?.totalTaxAmount) {
    cart.cost.totalTaxAmount = {
      amount: '0.0',
-      currencyCode: cart.cost.totalAmount.currencyCode
+      currencyCode: 'USD'
    };
  }

@ -136,9 +132,7 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
  };
 };

-const reshapeCollection = (
-  collection: ShopifyCollection
-): Collection | undefined => {
+const reshapeCollection = (collection: ShopifyCollection): Collection | undefined => {
  if (!collection) {
    return undefined;
  }
@ -177,14 +171,8 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
  });
 };

-const reshapeProduct = (
-  product: ShopifyProduct,
-  filterHiddenProducts: boolean = true
-) => {
-  if (
-    !product ||
-    (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))
-  ) {
+const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
+  if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
    return undefined;
  }

@ -215,64 +203,66 @@ const reshapeProducts = (products: ShopifyProduct[]) => {

 export async function createCart(): Promise<Cart> {
  const res = await shopifyFetch<ShopifyCreateCartOperation>({
-    query: createCartMutation
+    query: createCartMutation,
+    cache: 'no-store'
  });

  return reshapeCart(res.body.data.cartCreate.cart);
 }

 export async function addToCart(
+  cartId: string,
  lines: { merchandiseId: string; quantity: number }[]
 ): Promise<Cart> {
-  const cartId = (await cookies()).get('cartId')?.value!;
  const res = await shopifyFetch<ShopifyAddToCartOperation>({
    query: addToCartMutation,
    variables: {
      cartId,
      lines
-    }
+    },
+    cache: 'no-store'
  });
  return reshapeCart(res.body.data.cartLinesAdd.cart);
 }

-export async function removeFromCart(lineIds: string[]): Promise<Cart> {
-  const cartId = (await cookies()).get('cartId')?.value!;
+export async function removeFromCart(cartId: string, lineIds: string[]): Promise<Cart> {
  const res = await shopifyFetch<ShopifyRemoveFromCartOperation>({
    query: removeFromCartMutation,
    variables: {
      cartId,
      lineIds
-    }
+    },
+    cache: 'no-store'
  });

  return reshapeCart(res.body.data.cartLinesRemove.cart);
 }

 export async function updateCart(
+  cartId: string,
  lines: { id: string; merchandiseId: string; quantity: number }[]
 ): Promise<Cart> {
-  const cartId = (await cookies()).get('cartId')?.value!;
  const res = await shopifyFetch<ShopifyUpdateCartOperation>({
    query: editCartItemsMutation,
    variables: {
      cartId,
      lines
-    }
+    },
+    cache: 'no-store'
  });

  return reshapeCart(res.body.data.cartLinesUpdate.cart);
 }

-export async function getCart(): Promise<Cart | undefined> {
-  const cartId = (await cookies()).get('cartId')?.value;
-
+export async function getCart(cartId: string | undefined): Promise<Cart | undefined> {
  if (!cartId) {
    return undefined;
  }

  const res = await shopifyFetch<ShopifyCartOperation>({
    query: getCartQuery,
-    variables: { cartId }
+    variables: { cartId },
+    tags: [TAGS.cart]
  });

  // Old carts becomes `null` when you checkout.
@ -283,15 +273,10 @@ export async function getCart(): Promise<Cart | undefined> {
  return reshapeCart(res.body.data.cart);
 }

-export async function getCollection(
-  handle: string
-): Promise<Collection | undefined> {
-  'use cache';
-  cacheTag(TAGS.collections);
-  cacheLife('days');
-
+export async function getCollection(handle: string): Promise<Collection | undefined> {
  const res = await shopifyFetch<ShopifyCollectionOperation>({
    query: getCollectionQuery,
+    tags: [TAGS.collections],
    variables: {
      handle
    }
@ -309,12 +294,9 @@ export async function getCollectionProducts({
  reverse?: boolean;
  sortKey?: string;
 }): Promise<Product[]> {
-  'use cache';
-  cacheTag(TAGS.collections, TAGS.products);
-  cacheLife('days');
-
  const res = await shopifyFetch<ShopifyCollectionProductsOperation>({
    query: getCollectionProductsQuery,
+    tags: [TAGS.collections, TAGS.products],
    variables: {
      handle: collection,
      reverse,
@ -327,18 +309,13 @@ export async function getCollectionProducts({
    return [];
  }

-  return reshapeProducts(
-    removeEdgesAndNodes(res.body.data.collection.products)
-  );
+  return reshapeProducts(removeEdgesAndNodes(res.body.data.collection.products));
 }

 export async function getCollections(): Promise<Collection[]> {
-  'use cache';
-  cacheTag(TAGS.collections);
-  cacheLife('days');
-
  const res = await shopifyFetch<ShopifyCollectionsOperation>({
-    query: getCollectionsQuery
+    query: getCollectionsQuery,
+    tags: [TAGS.collections]
  });
  const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
  const collections = [
@ -364,12 +341,9 @@ export async function getCollections(): Promise<Collection[]> {
 }

 export async function getMenu(handle: string): Promise<Menu[]> {
-  'use cache';
-  cacheTag(TAGS.collections);
-  cacheLife('days');
-
  const res = await shopifyFetch<ShopifyMenuOperation>({
    query: getMenuQuery,
+    tags: [TAGS.collections],
    variables: {
      handle
    }
@ -378,10 +352,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
  return (
    res.body?.data?.menu?.items.map((item: { title: string; url: string }) => ({
      title: item.title,
-      path: item.url
-        .replace(domain, '')
-        .replace('/collections', '/search')
-        .replace('/pages', '')
+      path: item.url.replace(domain, '').replace('/collections', '/search').replace('/pages', '')
    })) || []
  );
 }
@ -389,6 +360,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
 export async function getPage(handle: string): Promise<Page> {
  const res = await shopifyFetch<ShopifyPageOperation>({
    query: getPageQuery,
+    cache: 'no-store',
    variables: { handle }
  });

@ -397,19 +369,17 @@ export async function getPage(handle: string): Promise<Page> {

 export async function getPages(): Promise<Page[]> {
  const res = await shopifyFetch<ShopifyPagesOperation>({
-    query: getPagesQuery
+    query: getPagesQuery,
+    cache: 'no-store'
  });

  return removeEdgesAndNodes(res.body.data.pages);
 }

 export async function getProduct(handle: string): Promise<Product | undefined> {
-  'use cache';
-  cacheTag(TAGS.products);
-  cacheLife('days');
-
  const res = await shopifyFetch<ShopifyProductOperation>({
    query: getProductQuery,
+    tags: [TAGS.products],
    variables: {
      handle
    }
@ -418,15 +388,10 @@ export async function getProduct(handle: string): Promise<Product | undefined> {
  return reshapeProduct(res.body.data.product, false);
 }

-export async function getProductRecommendations(
-  productId: string
-): Promise<Product[]> {
-  'use cache';
-  cacheTag(TAGS.products);
-  cacheLife('days');
-
+export async function getProductRecommendations(productId: string): Promise<Product[]> {
  const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
    query: getProductRecommendationsQuery,
+    tags: [TAGS.products],
    variables: {
      productId
    }
@ -444,12 +409,9 @@ export async function getProducts({
  reverse?: boolean;
  sortKey?: string;
 }): Promise<Product[]> {
-  'use cache';
-  cacheTag(TAGS.products);
-  cacheLife('days');
-
  const res = await shopifyFetch<ShopifyProductsOperation>({
    query: getProductsQuery,
+    tags: [TAGS.products],
    variables: {
      query,
      reverse,
@ -464,24 +426,16 @@ export async function getProducts({
 export async function revalidate(req: NextRequest): Promise<NextResponse> {
  // We always need to respond with a 200 status code to Shopify,
  // otherwise it will continue to retry the request.
-  const collectionWebhooks = [
-    'collections/create',
-    'collections/delete',
-    'collections/update'
-  ];
-  const productWebhooks = [
-    'products/create',
-    'products/delete',
-    'products/update'
-  ];
-  const topic = (await headers()).get('x-shopify-topic') || 'unknown';
+  const collectionWebhooks = ['collections/create', 'collections/delete', 'collections/update'];
+  const productWebhooks = ['products/create', 'products/delete', 'products/update'];
+  const topic = headers().get('x-shopify-topic') || 'unknown';
  const secret = req.nextUrl.searchParams.get('secret');
  const isCollectionUpdate = collectionWebhooks.includes(topic);
  const isProductUpdate = productWebhooks.includes(topic);

  if (!secret || secret !== process.env.SHOPIFY_REVALIDATION_SECRET) {
    console.error('Invalid revalidation secret.');
-    return NextResponse.json({ status: 401 });
+    return NextResponse.json({ status: 200 });
  }

  if (!isCollectionUpdate && !isProductUpdate) {
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -1,13 +1,6 @@
 import { ReadonlyURLSearchParams } from 'next/navigation';

-export const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
-  ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
-  : 'http://localhost:3000';
-
-export const createUrl = (
-  pathname: string,
-  params: URLSearchParams | ReadonlyURLSearchParams
-) => {
+export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
  const paramsString = params.toString();
  const queryString = `${paramsString.length ? '?' : ''}${paramsString}`;

@ -15,15 +8,10 @@ export const createUrl = (
 };

 export const ensureStartsWith = (stringToCheck: string, startsWith: string) =>
-  stringToCheck.startsWith(startsWith)
-    ? stringToCheck
-    : `${startsWith}${stringToCheck}`;
+  stringToCheck.startsWith(startsWith) ? stringToCheck : `${startsWith}${stringToCheck}`;

 export const validateEnvironmentVariables = () => {
-  const requiredEnvironmentVariables = [
-    'SHOPIFY_STORE_DOMAIN',
-    'SHOPIFY_STOREFRONT_ACCESS_TOKEN'
-  ];
+  const requiredEnvironmentVariables = ['SHOPIFY_STORE_DOMAIN', 'SHOPIFY_STOREFRONT_ACCESS_TOKEN'];
  const missingEnvironmentVariables = [] as string[];

  requiredEnvironmentVariables.forEach((envVar) => {
--- a/license.md
+++ b/license.md
@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2025 Vercel, Inc.
+Copyright (c) 2023 Vercel, Inc.

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/next.config.js
+++ b/next.config.js
@ -1,11 +1,5 @@
-export default {
-  experimental: {
-    ppr: true,
-    inlineCss: true,
-    useCache: true,
-    reactOwnerStack: true,
-    newDevOverlay: true
-  },
+/** @type {import('next').NextConfig} */
+module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
--- a/package.json
+++ b/package.json
@ -1,7 +1,11 @@
 {
  "private": true,
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  },
  "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "prettier": "prettier --write --ignore-unknown .",
@ -9,26 +13,26 @@
    "test": "pnpm prettier:check"
  },
  "dependencies": {
-    "@headlessui/react": "^2.2.0",
-    "@heroicons/react": "^2.2.0",
+    "@headlessui/react": "^2.1.2",
+    "@heroicons/react": "^2.1.5",
    "clsx": "^2.1.1",
    "geist": "^1.3.1",
-    "next": "15.2.0-canary.67",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "sonner": "^2.0.1"
+    "next": "https://vercel-packages.vercel.app/next/prs/68340/next",
+    "react": "19.0.0-rc-3208e73e-20240730",
+    "react-dom": "19.0.0-rc-3208e73e-20240730",
+    "sonner": "^1.5.0"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/postcss": "^4.0.8",
-    "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "22.13.4",
-    "@types/react": "19.0.10",
-    "@types/react-dom": "19.0.4",
-    "postcss": "^8.5.3",
-    "prettier": "3.5.1",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.8",
-    "typescript": "5.7.3"
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "20.14.12",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tailwindcss": "^3.4.6",
+    "typescript": "5.5.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -1,6 +0,0 @@
-/** @type {import('postcss-load-config').Config} */
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  }
-};
--- a/prettier.config.js
+++ b/prettier.config.js
@ -0,0 +1,9 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  singleQuote: true,
+  arrowParens: 'always',
+  trailingComma: 'none',
+  printWidth: 100,
+  tabWidth: 2,
+  plugins: ['prettier-plugin-tailwindcss']
+};
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,54 @@
+const plugin = require('tailwindcss/plugin');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['var(--font-geist-sans)']
+      },
+      keyframes: {
+        fadeIn: {
+          from: { opacity: 0 },
+          to: { opacity: 1 }
+        },
+        marquee: {
+          '0%': { transform: 'translateX(0%)' },
+          '100%': { transform: 'translateX(-100%)' }
+        },
+        blink: {
+          '0%': { opacity: 0.2 },
+          '20%': { opacity: 1 },
+          '100% ': { opacity: 0.2 }
+        }
+      },
+      animation: {
+        fadeIn: 'fadeIn .3s ease-in-out',
+        carousel: 'marquee 60s linear infinite',
+        blink: 'blink 1.4s both infinite'
+      }
+    }
+  },
+  future: {
+    hoverOnlyWhenSupported: true
+  },
+  plugins: [
+    require('@tailwindcss/container-queries'),
+    require('@tailwindcss/typography'),
+    plugin(({ matchUtilities, theme }) => {
+      matchUtilities(
+        {
+          'animation-delay': (value) => {
+            return {
+              'animation-delay': value
+            };
+          }
+        },
+        {
+          values: theme('transitionDelay')
+        }
+      );
+    })
+  ]
+};
Author	SHA1	Message	Date
Zack Tanner	f29a16de5c	add layout keying	2024-08-01 10:24:50 -07:00
Zack Tanner	6bfd0b1bd9	remove full prefetch on search page	2024-08-01 10:14:47 -07:00
Janka Uryga	6e85b80158	update next to https://github.com/vercel/next.js/pull/68340/	2024-07-31 16:57:21 +02:00
Lee Robinson	8c5f8d8d2a	next/form	2024-07-30 17:19:38 -05:00