Update Wix fork repository (#1439)

🔧💡 Fix: Enhance product gallery layout in product view page

- 🖼️ Implemented `flex-wrap` for the sub-gallery images.
- 🛠️ Ensured images wrap automatically when they exceed 5 or 6, preventing overflow and maintaining responsive design.
- ✅ Confirmed that the layout remains unaffected for galleries with 3 or fewer images.

This improvement enhances user experience by making sure large image sets are displayed without affecting screen layout.

.env.example

@@ -1,6 +1,4 @@
 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=""

.eslintrc.js

@@ -1,23 +0,0 @@
-module.exports = {
-  extends: ['next', 'prettier'],
-  plugins: ['unicorn'],
-  rules: {
-    'no-unused-vars': [
-      'error',
-      {
-        args: 'after-used',
-        caughtErrors: 'none',
-        ignoreRestSiblings: true,
-        vars: 'all'
-      }
-    ],
-    'prefer-const': 'error',
-    'react-hooks/exhaustive-deps': 'error',
-    'unicorn/filename-case': [
-      'error',
-      {
-        case: 'kebabCase'
-      }
-    ]
-  }
-};

.github/dependabot.yml

@@ -1,6 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'weekly'

.github/workflows/test.yml

@@ -1,32 +0,0 @@
-name: test
-on: pull_request
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Cancel running workflows
-        uses: styfle/cancel-workflow-action@0.11.0
-        with:
-          access_token: ${{ github.token }}
-      - name: Checkout repo
-        uses: actions/checkout@v3
-      - name: Set node version
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Set pnpm version
-        uses: pnpm/action-setup@v2
-        with:
-          run_install: false
-          version: 7
-      - name: Cache node_modules
-        id: node-modules-cache
-        uses: actions/cache@v3
-        with:
-          path: '**/node_modules'
-          key: node-modules-cache-${{ hashFiles('**/pnpm-lock.yaml') }}
-      - name: Install dependencies
-        if: steps.node-modules-cache.outputs.cache-hit != 'true'
-        run: pnpm install
-      - name: Run tests
-        run: pnpm test

.gitignore

@@ -36,3 +36,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.env*.local

.nvmrc

@@ -1 +0,0 @@
-18

.prettierignore

@@ -1,3 +0,0 @@
-.vercel
-.next
-pnpm-lock.yaml

.vscode/settings.json

@@ -2,8 +2,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.organizeImports": true,
-    "source.sortMembers": true
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit",
+    "source.sortMembers": "explicit"
   }
 }

README.md

@@ -1,19 +1,10 @@
-[![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)
+[![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)
 
 # Next.js Commerce
 
-A Next.js 13 and App Router-ready ecommerce template featuring:
+A high-performance, server-rendered Next.js App Router ecommerce application.
 
-- Next.js App Router
-- Optimized for SEO using Next.js's Metadata
-- React Server Components (RSCs) and Suspense
-- Server Actions for mutations
-- Edge Runtime
-- New fetching and caching paradigms
-- Dynamic OG images
-- Styling with Tailwind CSS
-- Checkout and payments with Shopify
-- Automatic light/dark mode based on system settings
+This template uses React Server Components, Server Actions, `Suspense`, `useOptimistic`, and more.
 
 <h3 id="v1-note"></h3>
 
@@ -23,14 +14,34 @@ A Next.js 13 and App Router-ready ecommerce template featuring:
 
 Vercel will only be actively maintaining a Shopify version [as outlined in our vision and strategy for Next.js Commerce](https://github.com/vercel/commerce/pull/966).
 
-Vercel is more than happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
+Vercel is happy to partner and work with any commerce provider to help them get a similar template up and running and listed below. Alternative providers should be able to fork this repository and swap out the `lib/shopify` file with their own implementation while leaving the rest of the template mostly unchanged.
 
 - 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/))
+
+> 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).
+
+## Integrations
+
+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
 
@@ -56,223 +67,9 @@ Your app should now be running on [localhost:3000](http://localhost:3000/).
 1. Select the `Vercel Solutions` scope.
 1. Connect to the existing `commerce-shopify` project.
 1. Run `vc env pull` to get environment variables.
-1. Run `pmpm dev` to ensure everything is working correctly.
+1. Run `pnpm dev` to ensure everything is working correctly.
 </details>
 
-## How to configure your Shopify store for Next.js Commerce
+## Vercel, Next.js Commerce, and Shopify Integration Guide
 
-Next.js Commerce requires a [paid Shopify plan](https://www.shopify.com/pricing).
-
-> Note: Next.js Commerce will not work with a Shopify Starter plan as it does not allow installation of custom themes, which is required to run as a headless storefront.
-
-### Add Shopify domain to an environment variable
-
-Create a `SHOPIFY_STORE_DOMAIN` environment variable and use your Shopify domain as the the value (ie. `[your-shopify-store-subdomain].myshopify.com`).
-
-> Note: Do not include the `https://`.
-
-### Accessing the Shopify Storefront API
-
-Next.js Commerce utilizes [Shopify's Storefront API](https://shopify.dev/docs/api/storefront) to create unique customer experiences. The API offers a full range of commerce options making it possible for customers to control products, collections, menus, pages, cart, checkout, and more.
-
-In order to use the Shopify's Storefront API, you need to install the [Headless app](https://apps.shopify.com/headless) in your Shopify store.
-
-Once installed, you'll need to create a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable and use the public access token as the value.
-
-> Note: Shopify does offer a Node.js Storefront API SDK. We use the Storefront API via GraphQL directly instead of the Node.js SDK so we have more control over fetching and caching.
-
-<details>
-  <summary>Expand to view detailed walkthrough</summary>
-
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/apps`.
-1. Click the green `Shopify App Store` button.
-   ![Shopify App Store](https://user-images.githubusercontent.com/446260/233220545-cb4c1461-ebc5-424e-a421-bf0d32044027.jpg)
-1. Search for `Headless` and click on the `Headless` app.
-   ![Headless](https://user-images.githubusercontent.com/446260/233220547-6d93b5ef-16c7-45db-99e7-13ae7e18eb39.jpg)
-1. Click the black `Add app` button.
-   ![Add app](https://user-images.githubusercontent.com/446260/233220550-a34c8bda-75a8-437a-9673-125f3794ff35.jpg)
-1. Click the green `Add sales channel` button.
-   ![Add sales channel](https://user-images.githubusercontent.com/446260/233220553-42d94a74-421d-4f8a-99ab-a95936b707a3.jpg)
-1. Click the green `Create storefront` button.
-   ![Create storefront](https://user-images.githubusercontent.com/446260/233220556-1eee15c4-a45d-446e-9f73-2e7c9f56b29c.jpg)
-1. Copy and paste the public access token and assign it to a `SHOPIFY_STOREFRONT_ACCESS_TOKEN` environment variable.
-   ![Pubic access token](https://user-images.githubusercontent.com/446260/233220558-5db04ff9-b894-40fe-bfba-0e92f26b8e1f.jpg)
-1. If you ever need to reference the public access token again, you can navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/headless_storefronts`.
-</details>
-
-### Install a headless theme
-
-When using a headless Shopify setup, you normally don't want customers to access any of the theme pages except for checkout. However, you can't totally disable the theme and a lot of links will still point to the theme (e.g. links in emails, order details, plugins, checkout, etc.).
-
-To enable a seamless flow between your headless site and Shopify, you can install the [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme).
-
-Follow the installation instructions and configure the theme with your headless site's values.
-
-<details>
-  <summary>Expand to view detailed walkthrough</summary>
-
-1. Download [Shopify Headless Theme](https://github.com/instantcommerce/shopify-headless-theme).
-   ![Download Shoify Headless Theme](https://user-images.githubusercontent.com/446260/233220560-9f3f5ab0-ffb4-4305-b4ee-2c9d33eea90f.jpg)
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/themes`.
-1. Click `Add theme`, then `Upload zip file`.
-   ![Upload zip file](https://user-images.githubusercontent.com/446260/233220561-7a53809e-0d95-45eb-b52f-3a52e3663a9c.jpg)
-1. Select the downloaded zip file from above, and click the green `Upload file` button.
-   ![Select and upload file](https://user-images.githubusercontent.com/446260/233220563-135fb9f7-2921-4189-8f17-3b1cc15c0ea6.jpg)
-1. Click `Customize`.
-   ![Customize theme](https://user-images.githubusercontent.com/446260/233220565-24b9c954-c18a-46f1-9db5-3d2a00040e48.jpg)
-1. Click `Theme settings` (ie. the paintbrush icon), expand the `STOREFRONT` section, enter your headless store domain, click the gray `Publish` button.
-   ![Set headless domain in theme settings](https://user-images.githubusercontent.com/446260/233220566-acaee14d-03f8-400d-a2a2-28e85eb5ecdc.jpg)
-1. Confirm the theme change by clicking the green `Save and publish` button.
-   ![Confirm save and publish](https://user-images.githubusercontent.com/446260/233220567-504d5bde-cfb9-426d-a264-f9a12d02af13.jpg)
-1. The headless theme should now be your current active theme.
-![Headless theme is current and active](https://user-images.githubusercontent.com/446260/233220569-63cab2b4-241b-4bf1-9b5b-451daaeceb91.jpg)
-</details>
-
-### Branding & Design
-
-Since you're creating a headless Shopify store, you'll be in full control of your brand and design. However, there are still a few aspects we're leaving within Shopify's control.
-
-- Checkout
-- Emails
-- Order status
-- Order history
-- Favicon (for any Shopify controlled pages)
-
-You can use Shopify's admin to customize these pages to match your brand and design.
-
-<details>
-  <summary>Expand to view detailed walkthrough</summary>
-
-#### Checkout, order status, and order history
-
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/checkout`.
-1. Click the green `Customize` button.
-   ![Customize](https://user-images.githubusercontent.com/446260/233220530-9beda4b4-5008-440a-b923-9d196b722539.jpg)
-1. Click `Branding` (ie. the paintbrush icon) and customize your brand. Please note, there are three steps / pages to the checkout flow. Use the dropdown to change pages and adjust branding as needed on each page. Click `Save` when you are done.
-   ![Branding](https://user-images.githubusercontent.com/446260/233220534-e884d9fd-1a39-4f4d-9d09-163dde47c2e8.jpg)
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/branding`.
-1. Customize settings to match your brand.
-   ![Branding](https://user-images.githubusercontent.com/446260/233220536-452b8802-9a1e-40f0-9a12-52b3dace84a5.jpg)
-
-#### Emails
-
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/email_settings`.
-1. Customize settings to match your brand.
-   ![Branding](https://user-images.githubusercontent.com/446260/233220538-13c83a9e-55f8-41e6-9b34-a39ee0848a8a.jpg)
-
-#### Favicon
-
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/themes`.
-1. Click the green `Customize` button.
-   ![Customize theme](https://user-images.githubusercontent.com/446260/233220539-4869a6cd-f59f-4de6-8091-95ed81d2302d.jpg)
-1. Click `Theme settings` (ie. the paintbrush icon), expand the `FAVICON` section, upload favicon, then click the `Save` button.
-   ![Favicon](https://user-images.githubusercontent.com/446260/233220542-ac81b674-d86e-4172-ab38-c79d1ad1ff36.jpg)
-
-</details>
-
-### Configure webhooks for on-demand incremental static regeneration (ISR)
-
-Utilizing [Shopify's webhooks](https://shopify.dev/docs/apps/webhooks), and listening for select [Shopify webhook event topics](https://shopify.dev/docs/api/admin-rest/2022-04/resources/webhook#event-topics), we can use [Next'js on-demand revalidation](https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating#using-on-demand-revalidation) to keep data fetches indefinitely cached until certain events in the Shopify store occur.
-
-Next.js is pre-configured to listen for the following Shopify webhook events and automatically revalidate fetches.
-
-- `collections/create`
-- `collections/delete`
-- `collections/update`
-- `products/create`
-- `products/delete`
-- `products/update` (this also includes when variants are added, updated, and removed as well as when products are purchased so inventory and out of stocks can be updated)
-
-<details>
-  <summary>Expand to view detailed walkthrough</summary>
-
-#### Setup secret for secure revalidation
-
-1. Create your own secret or [generate a random UUID](https://www.uuidgenerator.net/guid).
-1. Create a [Vercel Environment Variable](https://vercel.com/docs/concepts/projects/environment-variables) named `SHOPIFY_REVALIDATION_SECRET` and use the value from above.
-
-#### Configure Shopify webhooks
-
-1. Navigate to `https://[your-shopify-store-subdomain].myshopify.com/admin/settings/notifications`.
-1. Add webhooks for all six event topics listed above. You can add more sets for other preview urls, environments, or local development. Append `?secret=[SECRET]` to each url, where `[SECRET]` is the secret you created above.
-   ![Shopify store webhooks](https://github.com/vercel/commerce/assets/446260/3d713fd7-b642-46e2-b2ce-f2b695ff6d2b)
-   ![Shopify store add webhook](https://github.com/vercel/commerce/assets/446260/f0240a22-be07-42bc-bf6c-b97873868677)
-
-#### Testing webhooks during local development
-
-The easiest way to test webhooks while developing locally is to use [ngrok](https://ngrok.com).
-
-1. [Install and configure ngrok](https://ngrok.com/download) (you will need to create an account).
-1. Run your app locally, `npm run dev`.
-1. In a separate terminal session, run `ngrok http 3000`.
-1. Use the url generated by ngrok and add or update your webhook urls in Shopify.
-   ![ngrok](https://github.com/vercel/commerce/assets/446260/5dc09c5d-0e48-479c-ab64-de8dc9a2c4b1)
-   ![Shopify store edit webhook](https://github.com/vercel/commerce/assets/446260/13fd397d-4666-4e8d-b25f-4adc674345c0)
-1. You can now make changes to your store and your local app should receive updates. You can also use the `Send test notification` button to trigger a generic webhook test.
-   ![Shopify store webhook send test notification](https://github.com/vercel/commerce/assets/446260/e872e233-1663-446d-961f-8c9455358530)
-
-</details>
-
-### Using Shopify as a CMS
-
-Next.js Commerce is fully powered by Shopify in a truly headless and data driven way.
-
-#### Products
-
-`https://[your-shopify-store-subdomain].myshopify.com/admin/products`
-
-Only `Active` products are shown. `Draft` products will not be shown until they are marked as `Active`.
-
-`Active` products can still be hidden and not seen by navigating the site, by adding a `nextjs-frontend-hidden` tag on the product. This tag will also tell search engines to not index or crawl the product. The product is still directly accessible via url. This feature is great for "secret" products you only want to people you share the url with.
-
-Product options and option combinations are driven from Shopify options and variants. When selecting options on the product detail page, other option and variant combinations will be visually validated and verified for availability, like Amazon does.
-
-Products that are active and "out of stock" are still shown on the site, but the ability to add the product to the cart is disabled.
-
-#### Collections
-
-`https://[your-shopify-store-subdomain].myshopify.com/admin/collections`
-
-Create whatever collections you want and configure them however you want. All available collections will show on the search page as filters on the left, with one exception...
-
-Any collection names that start with the word "hidden" will not show up on the headless front end. The Next.js Commerce theme comes pre-configured to look for two hidden collections. Collections were chosen for this over tags so that order of products could be controlled (collections allow for manual ordering).
-
-Create the following collections:
-
-- `Hidden: Homepage Featured Items` -- Products in this collection are displayed in the three featured blocks on the homepage.
-- `Hidden: Homepage Carousel` -- Products in this collection are displayed in the auto-scrolling carousel section on the homepage.
-
-![Shopify collections](https://user-images.githubusercontent.com/446260/233220543-81896a2b-7085-4abc-a4f1-ce321e08b953.jpg)
-
-![Shopify collection detail](https://user-images.githubusercontent.com/446260/233220544-ecd4c069-49fc-4a0b-8378-aa5e1b4b5257.jpg)
-
-#### Pages
-
-`https://[your-shopify-store-subdomain].myshopify.com/admin/pages`
-
-Next.js Commerce contains a dynamic `[page]` route. It will use the value to look for a corresponding page in Shopify. If a page is found, it will display its rich content using Tailwind's prose. If a page is not found, a 404 page is displayed.
-
-![Shopify pages](https://user-images.githubusercontent.com/446260/233221142-4dc3fa56-5256-4d84-b0a3-331ffb7d79b2.jpg)
-
-![Shopify page detail](https://user-images.githubusercontent.com/446260/233247700-cbeaf917-fb67-49e9-b9b9-5ee8cb188639.jpg)
-
-#### Navigation menus
-
-`https://[your-shopify-store-subdomain].myshopify.com/admin/menus`
-
-Next.js Commerce's header and footer navigation is pre-configured to be controlled by Shopify navigation menus. This means you have full control over what links go here. They can be to collections, pages, external links, and more.
-
-Create the following navigation menus:
-
-- `Next.js Frontend Header Menu` -- Menu items to be shown in the headless frontend header.
-- `Next.js Frontend Footer Menu` -- Menu items to be shown in the headless frontend footer.
-
-![Shopify navigation menus](https://user-images.githubusercontent.com/446260/233220571-33f9d5a8-1206-4ab4-ad79-83b4ca954331.jpg)
-
-![Shopify navigation menu detail](https://user-images.githubusercontent.com/446260/233220573-5f03a51f-4100-461f-a696-f085856e391b.jpg)
-
-#### SEO
-
-Shopify's products, collections, pages, etc. allow you to create custom SEO titles and descriptions. Next.js Commerce is pre-configured to display these custom values, but also comes with sensible default fallbacks if they are not provided.
-
-![Shopify SEO](https://user-images.githubusercontent.com/446260/233247701-0ff2a560-7949-4e6c-b3a8-8168ed6341f8.jpg)
+You can use this comprehensive [integration guide](https://vercel.com/docs/integrations/ecommerce/shopify) with step-by-step instructions on how to configure Shopify as a headless CMS using Next.js Commerce as your headless Shopify storefront on Vercel.

app/[page]/layout.tsx

@@ -1,15 +1,12 @@
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <Suspense>
+    <>
       <div className="w-full">
-        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">
-          <Suspense>{children}</Suspense>
-        </div>
+        <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }

app/[page]/opengraph-image.tsx

@@ -1,8 +1,6 @@
 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;

app/[page]/page.tsx

@@ -4,15 +4,10 @@ import Prose from 'components/prose';
 import { getPage } from 'lib/shopify';
 import { notFound } from 'next/navigation';
 
-export const runtime = 'edge';
-
-export const revalidate = 43200; // 12 hours in seconds
-
-export async function generateMetadata({
-  params
-}: {
-  params: { page: string };
+export async function generateMetadata(props: {
+  params: Promise<{ page: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const page = await getPage(params.page);
 
   if (!page) return notFound();
@@ -28,7 +23,8 @@ export async function generateMetadata({
   };
 }
 
-export default async function Page({ params }: { params: { page: string } }) {
+export default async function Page(props: { params: Promise<{ page: string }> }) {
+  const params = await props.params;
   const page = await getPage(params.page);
 
   if (!page) return notFound();
@@ -36,7 +32,7 @@ export default async function Page({ params }: { params: { page: string } }) {
   return (
     <>
       <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body as string} />
+      <Prose className="mb-8" html={page.body} />
       <p className="text-sm italic">
         {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
           year: 'numeric',

app/api/revalidate/route.ts

@@ -1,8 +1,6 @@
 import { revalidate } from 'lib/shopify';
 import { NextRequest, NextResponse } from 'next/server';
 
-export const runtime = 'edge';
-
 export async function POST(req: NextRequest): Promise<NextResponse> {
   return revalidate(req);
 }

app/error.tsx

@@ -2,7 +2,7 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
       <h2 className="text-xl font-bold">Oh no!</h2>
       <p className="my-2">
         There was an issue with our storefront. This could be a temporary issue, please try your

app/globals.css

@@ -1,6 +1,17 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin "@tailwindcss/container-queries";
+@plugin "@tailwindcss/typography";
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 @media (prefers-color-scheme: dark) {
   html {
@@ -17,5 +28,5 @@
 a,
 input,
 button {
-  @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;
+  @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;
 }

app/layout.tsx

@@ -1,15 +1,14 @@
-import Navbar from 'components/layout/navbar';
-import { ensureStartsWith } from 'lib/utils';
-import { Inter } from 'next/font/google';
-import { ReactNode, Suspense } from 'react';
+import { CartProvider } from 'components/cart/cart-context';
+import { Navbar } from 'components/layout/navbar';
+import { WelcomeToast } from 'components/welcome-toast';
+import { GeistSans } from 'geist/font/sans';
+import { getCart } from 'lib/shopify';
+import { ReactNode } from 'react';
+import { Toaster } from 'sonner';
 import './globals.css';
+import { baseUrl } from 'lib/utils';
 
-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;
+const { SITE_NAME } = process.env;
 
 export const metadata = {
   metadataBase: new URL(baseUrl),
@@ -20,31 +19,28 @@ export const metadata = {
   robots: {
     follow: true,
     index: true
-  },
-  ...(twitterCreator &&
-    twitterSite && {
-      twitter: {
-        card: 'summary_large_image',
-        creator: twitterCreator,
-        site: twitterSite
-      }
-    })
+  }
 };
 
-const inter = Inter({
-  subsets: ['latin'],
-  display: 'swap',
-  variable: '--font-inter'
-});
+export default async function RootLayout({
+  children
+}: {
+  children: ReactNode;
+}) {
+  // Don't await the fetch, pass the Promise to the context provider
+  const cart = getCart();
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.variable}>
+    <html lang="en" className={GeistSans.variable}>
       <body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
-        <Navbar />
-        <Suspense>
-          <main>{children}</main>
-        </Suspense>
+        <CartProvider cartPromise={cart}>
+          <Navbar />
+          <main>
+            {children}
+            <Toaster closeButton />
+            <WelcomeToast />
+          </main>
+        </CartProvider>
       </body>
     </html>
   );

app/opengraph-image.tsx

@@ -1,7 +1,5 @@
 import OpengraphImage from 'components/opengraph-image';
 
-export const runtime = 'edge';
-
 export default async function Image() {
   return await OpengraphImage();
 }

app/page.tsx

@@ -1,27 +1,21 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
 import Footer from 'components/layout/footer';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
 
 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'
   }
 };
 
-export default async function HomePage() {
+export default function HomePage() {
   return (
     <>
       <ThreeItemGrid />
-      <Suspense>
-        <Carousel />
-        <Suspense>
-          <Footer />
-        </Suspense>
-      </Suspense>
+      <Carousel />
+      <Footer />
     </>
   );
 }

app/product/[handle]/page.tsx

@@ -1,23 +1,21 @@
 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 { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
+import { Suspense } from 'react';
 
-export const runtime = 'edge';
-
-export async function generateMetadata({
-  params
-}: {
-  params: { handle: string };
+export async function generateMetadata(props: {
+  params: Promise<{ handle: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const product = await getProduct(params.handle);
 
   if (!product) return notFound();
@@ -51,7 +49,8 @@ export async function generateMetadata({
   };
 }
 
-export default async function ProductPage({ params }: { params: { handle: string } }) {
+export default async function ProductPage(props: { params: Promise<{ handle: string }> }) {
+  const params = await props.params;
   const product = await getProduct(params.handle);
 
   if (!product) return notFound();
@@ -74,36 +73,40 @@ export default async function ProductPage({ params }: { params: { handle: string
   };
 
   return (
-    <>
+    <ProductProvider>
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <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 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
+      <div className="mx-auto max-w-(--breakpoint-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">
-            <Gallery
-              images={product.images.map((image: Image) => ({
-                src: image.url,
-                altText: image.altText
-              }))}
-            />
+            <Suspense
+              fallback={
+                <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden" />
+              }
+            >
+              <Gallery
+                images={product.images.slice(0, 5).map((image: Image) => ({
+                  src: image.url,
+                  altText: image.altText
+                }))}
+              />
+            </Suspense>
           </div>
 
           <div className="basis-full lg:basis-2/6">
-            <ProductDescription product={product} />
+            <Suspense fallback={null}>
+              <ProductDescription product={product} />
+            </Suspense>
           </div>
         </div>
-        <Suspense>
-          <RelatedProducts id={product.id} />
-        </Suspense>
+        <RelatedProducts id={product.id} />
       </div>
-      <Suspense>
-        <Footer />
-      </Suspense>
-    </>
+      <Footer />
+    </ProductProvider>
   );
 }
 
@@ -121,7 +124,11 @@ async function RelatedProducts({ id }: { id: string }) {
             key={product.handle}
             className="aspect-square w-full flex-none min-[475px]:w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5"
           >
-            <Link className="relative h-full w-full" href={`/product/${product.handle}`}>
+            <Link
+              className="relative h-full w-full"
+              href={`/product/${product.handle}`}
+              prefetch={true}
+            >
               <GridTileImage
                 alt={product.title}
                 label={{

app/robots.ts

@@ -1,6 +1,4 @@
-const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
-  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-  : 'http://localhost:3000';
+import { baseUrl } from 'lib/utils';
 
 export default function robots() {
   return {

app/search/[collection]/opengraph-image.tsx

@@ -1,9 +1,11 @@
 import OpengraphImage from 'components/opengraph-image';
 import { getCollection } from 'lib/shopify';
 
-export const runtime = 'edge';
-
-export default async function Image({ params }: { params: { collection: string } }) {
+export default async function Image({
+  params
+}: {
+  params: { collection: string };
+}) {
   const collection = await getCollection(params.collection);
   const title = collection?.seo?.title || collection?.title;
 

app/search/[collection]/page.tsx

@@ -6,13 +6,10 @@ import Grid from 'components/grid';
 import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 
-export const runtime = 'edge';
-
-export async function generateMetadata({
-  params
-}: {
-  params: { collection: string };
+export async function generateMetadata(props: {
+  params: Promise<{ collection: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const collection = await getCollection(params.collection);
 
   if (!collection) return notFound();
@@ -24,13 +21,12 @@ export async function generateMetadata({
   };
 }
 
-export default async function CategoryPage({
-  params,
-  searchParams
-}: {
-  params: { collection: string };
-  searchParams?: { [key: string]: string | string[] | undefined };
+export default async function CategoryPage(props: {
+  params: Promise<{ collection: string }>;
+  searchParams?: Promise<{ [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 });

app/search/children-wrapper.tsx

@@ -0,0 +1,10 @@
+'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>;
+}

app/search/layout.tsx

@@ -2,21 +2,30 @@ import Footer from 'components/layout/footer';
 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 (
-    <Suspense>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
+    <>
+      <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="order-first w-full flex-none md:max-w-[125px]">
           <Collections />
         </div>
-        <div className="order-last min-h-screen w-full md:order-none">{children}</div>
+        <div className="order-last min-h-screen w-full md:order-none">
+          <Suspense fallback={null}>
+            <ChildrenWrapper>{children}</ChildrenWrapper>
+          </Suspense>
+        </div>
         <div className="order-none flex-none md:order-last md:w-[125px]">
           <FilterList list={sorting} title="Sort by" />
         </div>
       </div>
       <Footer />
-    </Suspense>
+    </>
   );
 }

app/search/loading.tsx

@@ -2,14 +2,17 @@ import Grid from 'components/grid';
 
 export default function Loading() {
   return (
-    <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-900" />
-          );
-        })}
-    </Grid>
+    <>
+      <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>
+    </>
   );
 }

app/search/page.tsx

@@ -3,18 +3,15 @@ import ProductGridItems from 'components/layout/product-grid-items';
 import { defaultSort, sorting } from 'lib/constants';
 import { getProducts } from 'lib/shopify';
 
-export const runtime = 'edge';
-
 export const metadata = {
   title: 'Search',
   description: 'Search for products in the store.'
 };
 
-export default async function SearchPage({
-  searchParams
-}: {
-  searchParams?: { [key: string]: string | string[] | undefined };
+export default async function SearchPage(props: {
+  searchParams?: Promise<{ [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;
 

app/sitemap.ts

@@ -1,4 +1,5 @@
 import { getCollections, getPages, getProducts } from 'lib/shopify';
+import { baseUrl, validateEnvironmentVariables } from 'lib/utils';
 import { MetadataRoute } from 'next';
 
 type Route = {
@@ -6,11 +7,11 @@ 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> {
+  validateEnvironmentVariables();
+
   const routesMap = [''].map((route) => ({
     url: `${baseUrl}${route}`,
     lastModified: new Date().toISOString()
@@ -40,7 +41,9 @@ 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);
   }

components/carousel.tsx

@@ -12,7 +12,7 @@ export async function Carousel() {
   const carouselProducts = [...products, ...products, ...products];
 
   return (
-    <div className=" w-full overflow-x-auto pb-6 pt-1">
+    <div className="w-full overflow-x-auto pb-6 pt-1">
       <ul className="flex animate-carousel gap-4">
         {carouselProducts.map((product, i) => (
           <li

components/cart/actions.ts

@@ -1,69 +1,106 @@
 'use server';
 
-import { addToCart, createCart, getCart, removeFromCart, updateCart } from 'lib/shopify';
+import { TAGS } from 'lib/constants';
+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 const addItem = async (variantId: string | undefined): Promise<String | undefined> => {
-  let cartId = cookies().get('cartId')?.value;
-  let cart;
-
-  if (cartId) {
-    cart = await getCart(cartId);
-  }
-
-  if (!cartId || !cart) {
-    cart = await createCart();
-    cartId = cart.id;
-    cookies().set('cartId', cartId);
-  }
-
-  if (!variantId) {
-    return 'Missing product variant ID';
+export async function addItem(
+  prevState: any,
+  selectedVariantId: string | undefined
+) {
+  if (!selectedVariantId) {
+    return 'Error adding item to cart';
   }
 
   try {
-    await addToCart(cartId, [{ merchandiseId: variantId, quantity: 1 }]);
+    await addToCart([{ merchandiseId: selectedVariantId, quantity: 1 }]);
+    revalidateTag(TAGS.cart);
   } catch (e) {
     return 'Error adding item to cart';
   }
-};
+}
 
-export const removeItem = async (lineId: string): Promise<String | undefined> => {
-  const cartId = cookies().get('cartId')?.value;
-
-  if (!cartId) {
-    return 'Missing cart ID';
-  }
+export async function removeItem(prevState: any, merchandiseId: string) {
   try {
-    await removeFromCart(cartId, [lineId]);
+    const cart = await getCart();
+
+    if (!cart) {
+      return 'Error fetching cart';
+    }
+
+    const lineItem = cart.lines.find(
+      (line) => line.merchandise.id === merchandiseId
+    );
+
+    if (lineItem && lineItem.id) {
+      await removeFromCart([lineItem.id]);
+      revalidateTag(TAGS.cart);
+    } else {
+      return 'Item not found in cart';
+    }
   } catch (e) {
     return 'Error removing item from cart';
   }
-};
+}
 
-export const updateItemQuantity = async ({
-  lineId,
-  variantId,
-  quantity
-}: {
-  lineId: string;
-  variantId: string;
-  quantity: number;
-}): Promise<String | undefined> => {
-  const cartId = cookies().get('cartId')?.value;
-
-  if (!cartId) {
-    return 'Missing cart ID';
+export async function updateItemQuantity(
+  prevState: any,
+  payload: {
+    merchandiseId: string;
+    quantity: number;
   }
+) {
+  const { merchandiseId, quantity } = payload;
+
   try {
-    await updateCart(cartId, [
-      {
-        id: lineId,
-        merchandiseId: variantId,
-        quantity
+    const cart = await getCart();
+
+    if (!cart) {
+      return 'Error fetching cart';
+    }
+
+    const lineItem = cart.lines.find(
+      (line) => line.merchandise.id === merchandiseId
+    );
+
+    if (lineItem && lineItem.id) {
+      if (quantity === 0) {
+        await removeFromCart([lineItem.id]);
+      } else {
+        await updateCart([
+          {
+            id: lineItem.id,
+            merchandiseId,
+            quantity
+          }
+        ]);
       }
-    ]);
+    } else if (quantity > 0) {
+      // If the item doesn't exist in the cart and quantity > 0, add it
+      await addToCart([{ merchandiseId, quantity }]);
+    }
+
+    revalidateTag(TAGS.cart);
   } catch (e) {
+    console.error(e);
     return 'Error updating item quantity';
   }
-};
+}
+
+export async function redirectToCheckout() {
+  let cart = await getCart();
+  redirect(cart!.checkoutUrl);
+}
+
+export async function createCartAndSetCookie() {
+  let cart = await createCart();
+  (await cookies()).set('cartId', cart.id!);
+}

components/cart/add-to-cart.tsx

@@ -3,66 +3,92 @@
 import { PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import { addItem } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useTransition } from 'react';
+import { useProduct } from 'components/product/product-context';
+import { Product, ProductVariant } from 'lib/shopify/types';
+import { useActionState } from 'react';
+import { useCart } from './cart-context';
 
-export function AddToCart({
-  variants,
-  availableForSale
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
 }: {
-  variants: ProductVariant[];
   availableForSale: boolean;
+  selectedVariantId: string | undefined;
 }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [isPending, startTransition] = useTransition();
-  const defaultVariantId = variants.length === 1 ? variants[0]?.id : undefined;
-  const variant = variants.find((variant: ProductVariant) =>
-    variant.selectedOptions.every(
-      (option) => option.value === searchParams.get(option.name.toLowerCase())
-    )
-  );
-  const selectedVariantId = variant?.id || defaultVariantId;
-  const title = !availableForSale
-    ? 'Out of stock'
-    : !selectedVariantId
-    ? 'Please select options'
-    : undefined;
+  const buttonClasses =
+    'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white';
+  const disabledClasses = 'cursor-not-allowed opacity-60 hover:opacity-60';
+
+  if (!availableForSale) {
+    return (
+      <button disabled className={clsx(buttonClasses, disabledClasses)}>
+        Out Of Stock
+      </button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <button
+        aria-label="Please select an option"
+        disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
+        <div className="absolute left-0 ml-4">
+          <PlusIcon className="h-5" />
+        </div>
+        Add To Cart
+      </button>
+    );
+  }
 
   return (
     <button
-      aria-label="Add item to cart"
-      disabled={isPending || !availableForSale || !selectedVariantId}
-      title={title}
-      onClick={() => {
-        // Safeguard in case someone messes with `disabled` in devtools.
-        if (!availableForSale || !selectedVariantId) return;
-
-        startTransition(async () => {
-          const error = await addItem(selectedVariantId);
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
-      }}
-      className={clsx(
-        'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
-        {
-          'cursor-not-allowed opacity-60 hover:opacity-60': !availableForSale || !selectedVariantId,
-          'cursor-not-allowed': isPending
-        }
-      )}
+      aria-label="Add to cart"
+      className={clsx(buttonClasses, {
+        'hover:opacity-90': true
+      })}
     >
       <div className="absolute left-0 ml-4">
-        {!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
+        <PlusIcon className="h-5" />
       </div>
-      <span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
+      Add To Cart
     </button>
   );
 }
+
+export function AddToCart({ product }: { product: Product }) {
+  const { variants, availableForSale } = product;
+  const { addCartItem } = useCart();
+  const { state } = useProduct();
+  const [message, formAction] = useActionState(addItem, null);
+
+  const variant = variants.find((variant: ProductVariant) =>
+    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
+  )!;
+
+  return (
+    <form
+      action={async () => {
+        addCartItem(finalVariant, product);
+        addItemAction();
+      }}
+    >
+      <SubmitButton
+        availableForSale={availableForSale}
+        selectedVariantId={selectedVariantId}
+      />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

components/cart/cart-context.tsx

@@ -0,0 +1,238 @@
+'use client';
+
+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 CartContextType = {
+  cartPromise: Promise<Cart | undefined>;
+};
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+function calculateItemCost(quantity: number, price: string): string {
+  return (Number(price) * quantity).toString();
+}
+
+function updateCartItem(
+  item: CartItem,
+  updateType: UpdateType
+): CartItem | null {
+  if (updateType === 'delete') return null;
+
+  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()
+  );
+
+  return {
+    ...item,
+    quantity: newQuantity,
+    cost: {
+      ...item.cost,
+      totalAmount: {
+        ...item.cost.totalAmount,
+        amount: newTotalAmount
+      }
+    }
+  };
+}
+
+function createOrUpdateCartItem(
+  existingItem: CartItem | undefined,
+  variant: ProductVariant,
+  product: Product
+): CartItem {
+  const quantity = existingItem ? existingItem.quantity + 1 : 1;
+  const totalAmount = calculateItemCost(quantity, variant.price.amount);
+
+  return {
+    id: existingItem?.id,
+    quantity,
+    cost: {
+      totalAmount: {
+        amount: totalAmount,
+        currencyCode: variant.price.currencyCode
+      }
+    },
+    merchandise: {
+      id: variant.id,
+      title: variant.title,
+      selectedOptions: variant.selectedOptions,
+      product: {
+        id: product.id,
+        handle: product.handle,
+        title: product.title,
+        featuredImage: product.featuredImage
+      }
+    }
+  };
+}
+
+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 currencyCode = lines[0]?.cost.totalAmount.currencyCode ?? 'USD';
+
+  return {
+    totalQuantity,
+    cost: {
+      subtotalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalAmount: { amount: totalAmount.toString(), currencyCode },
+      totalTaxAmount: { amount: '0', currencyCode }
+    }
+  };
+}
+
+function createEmptyCart(): Cart {
+  return {
+    id: undefined,
+    checkoutUrl: '',
+    totalQuantity: 0,
+    lines: [],
+    cost: {
+      subtotalAmount: { amount: '0', currencyCode: 'USD' },
+      totalAmount: { amount: '0', currencyCode: 'USD' },
+      totalTaxAmount: { amount: '0', currencyCode: 'USD' }
+    }
+  };
+}
+
+function cartReducer(state: Cart | undefined, action: CartAction): Cart {
+  const currentCart = state || createEmptyCart();
+
+  switch (action.type) {
+    case 'UPDATE_ITEM': {
+      const { merchandiseId, updateType } = action.payload;
+      const updatedLines = currentCart.lines
+        .map((item) =>
+          item.merchandise.id === merchandiseId
+            ? updateCartItem(item, updateType)
+            : item
+        )
+        .filter(Boolean) as CartItem[];
+
+      if (updatedLines.length === 0) {
+        return {
+          ...currentCart,
+          lines: [],
+          totalQuantity: 0,
+          cost: {
+            ...currentCart.cost,
+            totalAmount: { ...currentCart.cost.totalAmount, amount: '0' }
+          }
+        };
+      }
+
+      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 updatedLines = existingItem
+        ? currentCart.lines.map((item) =>
+            item.merchandise.id === variant.id ? updatedItem : item
+          )
+        : [...currentCart.lines, updatedItem];
+
+      return {
+        ...currentCart,
+        ...updateCartTotals(updatedLines),
+        lines: updatedLines
+      };
+    }
+    default:
+      return currentCart;
+  }
+}
+
+export function CartProvider({
+  children,
+  cartPromise
+}: {
+  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 updateCartItem = (merchandiseId: string, updateType: UpdateType) => {
+    updateOptimisticCart({
+      type: 'UPDATE_ITEM',
+      payload: { merchandiseId, updateType }
+    });
+  };
+
+  const addCartItem = (variant: ProductVariant, product: Product) => {
+    updateOptimisticCart({ type: 'ADD_ITEM', payload: { variant, product } });
+  };
+
+  return useMemo(
+    () => ({
+      cart: optimisticCart,
+      updateCartItem,
+      addCartItem
+    }),
+    [optimisticCart]
+  );
+}

components/cart/close-cart.tsx

@@ -1,10 +0,0 @@
-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>
-  );
-}

components/cart/delete-item-button.tsx

@@ -1,44 +1,38 @@
-import { XMarkIcon } from '@heroicons/react/24/outline';
-import LoadingDots from 'components/loading-dots';
-import { useRouter } from 'next/navigation';
+'use client';
 
-import clsx from 'clsx';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { removeItem } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
-import { useTransition } from 'react';
+import { useActionState } from 'react';
 
-export default function DeleteItemButton({ item }: { item: CartItem }) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
+export function DeleteItemButton({
+  item,
+  optimisticUpdate
+}: {
+  item: CartItem;
+  optimisticUpdate: any;
+}) {
+  const [message, formAction] = useActionState(removeItem, null);
+  const merchandiseId = item.merchandise.id;
+  const removeItemAction = formAction.bind(null, merchandiseId);
 
   return (
-    <button
-      aria-label="Remove cart item"
-      onClick={() => {
-        startTransition(async () => {
-          const error = await removeItem(item.id);
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
+    <form
+      action={async () => {
+        optimisticUpdate(merchandiseId, 'delete');
+        removeItemAction();
       }}
-      disabled={isPending}
-      className={clsx(
-        'ease flex h-[17px] w-[17px] items-center justify-center rounded-full bg-neutral-500 transition-all duration-200',
-        {
-          'cursor-not-allowed px-0': isPending
-        }
-      )}
     >
-      {isPending ? (
-        <LoadingDots className="bg-white" />
-      ) : (
-        <XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
-      )}
-    </button>
+      <button
+        type="submit"
+        aria-label="Remove cart item"
+        className="flex h-[24px] w-[24px] items-center justify-center rounded-full bg-neutral-500"
+      >
+        <XMarkIcon className="mx-[1px] h-4 w-4 text-white dark:text-black" />
+      </button>
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
   );
 }

components/cart/edit-item-quantity-button.tsx

@@ -1,56 +1,26 @@
-import { useRouter } from 'next/navigation';
-import { useTransition } from 'react';
+'use client';
 
 import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import { removeItem, updateItemQuantity } from 'components/cart/actions';
-import LoadingDots from 'components/loading-dots';
+import { updateItemQuantity } from 'components/cart/actions';
 import type { CartItem } from 'lib/shopify/types';
+import { useActionState } from 'react';
 
-export default function EditItemQuantityButton({
-  item,
-  type
-}: {
-  item: CartItem;
-  type: 'plus' | 'minus';
-}) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-
+function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
   return (
     <button
-      aria-label={type === 'plus' ? 'Increase item quantity' : 'Reduce item quantity'}
-      onClick={() => {
-        startTransition(async () => {
-          const error =
-            type === 'minus' && item.quantity - 1 === 0
-              ? await removeItem(item.id)
-              : await updateItemQuantity({
-                  lineId: item.id,
-                  variantId: item.merchandise.id,
-                  quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
-                });
-
-          if (error) {
-            // Trigger the error boundary in the root error.js
-            throw new Error(error.toString());
-          }
-
-          router.refresh();
-        });
-      }}
-      disabled={isPending}
+      type="submit"
+      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 px-2 transition-all duration-200 hover:border-neutral-800 hover:opacity-80',
+        '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',
         {
-          'cursor-not-allowed': isPending,
           'ml-auto': type === 'minus'
         }
       )}
     >
-      {isPending ? (
-        <LoadingDots className="bg-black dark:bg-white" />
-      ) : type === 'plus' ? (
+      {type === 'plus' ? (
         <PlusIcon className="h-4 w-4 dark:text-neutral-500" />
       ) : (
         <MinusIcon className="h-4 w-4 dark:text-neutral-500" />
@@ -58,3 +28,34 @@ export default function EditItemQuantityButton({
     </button>
   );
 }
+
+export function EditItemQuantityButton({
+  item,
+  type,
+  optimisticUpdate
+}: {
+  item: CartItem;
+  type: 'plus' | 'minus';
+  optimisticUpdate: any;
+}) {
+  const [message, formAction] = useActionState(updateItemQuantity, null);
+  const payload = {
+    merchandiseId: item.merchandise.id,
+    quantity: type === 'plus' ? item.quantity + 1 : item.quantity - 1
+  };
+  const updateItemQuantityAction = formAction.bind(null, payload);
+
+  return (
+    <form
+      action={async () => {
+        optimisticUpdate(payload.merchandiseId, type);
+        updateItemQuantityAction();
+      }}
+    >
+      <SubmitButton type={type} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

components/cart/index.tsx

@@ -1,14 +0,0 @@
-import { getCart } from 'lib/shopify';
-import { cookies } from 'next/headers';
-import CartModal from './modal';
-
-export default async function Cart() {
-  const cartId = cookies().get('cartId')?.value;
-  let cart;
-
-  if (cartId) {
-    cart = await getCart(cartId);
-  }
-
-  return <CartModal cart={cart} />;
-}

components/cart/modal.tsx

@@ -1,38 +1,48 @@
 'use client';
 
+import clsx from 'clsx';
 import { Dialog, Transition } from '@headlessui/react';
-import { ShoppingCartIcon } from '@heroicons/react/24/outline';
+import { ShoppingCartIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import LoadingDots from 'components/loading-dots';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
-import type { Cart } from 'lib/shopify/types';
 import { createUrl } from 'lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
 import { Fragment, useEffect, useRef, useState } from 'react';
-import CloseCart from './close-cart';
-import DeleteItemButton from './delete-item-button';
-import EditItemQuantityButton from './edit-item-quantity-button';
+import { useFormStatus } from 'react-dom';
+import { createCartAndSetCookie, redirectToCheckout } from './actions';
+import { useCart } from './cart-context';
+import { DeleteItemButton } from './delete-item-button';
+import { EditItemQuantityButton } from './edit-item-quantity-button';
 import OpenCart from './open-cart';
 
 type MerchandiseSearchParams = {
   [key: string]: string;
 };
 
-export default function CartModal({ cart }: { cart: Cart | undefined }) {
+export default function CartModal() {
+  const { cart, updateCartItem } = useCart();
   const [isOpen, setIsOpen] = useState(false);
   const quantityRef = useRef(cart?.totalQuantity);
   const openCart = () => setIsOpen(true);
   const closeCart = () => setIsOpen(false);
 
   useEffect(() => {
-    // Open cart modal when quantity changes.
-    if (cart?.totalQuantity !== quantityRef.current) {
-      // But only if it's not already open (quantity also changes when editing items in cart).
+    if (!cart) {
+      createCartAndSetCookie();
+    }
+  }, [cart]);
+
+  useEffect(() => {
+    if (
+      cart?.totalQuantity &&
+      cart?.totalQuantity !== quantityRef.current &&
+      cart?.totalQuantity > 0
+    ) {
       if (!isOpen) {
         setIsOpen(true);
       }
-
-      // Always update the quantity reference
       quantityRef.current = cart?.totalQuantity;
     }
   }, [isOpen, cart?.totalQuantity, quantityRef]);
@@ -64,10 +74,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">My Cart</p>
-
                 <button aria-label="Close cart" onClick={closeCart}>
                   <CloseCart />
                 </button>
@@ -76,81 +85,113 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
               {!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="flex-grow overflow-auto py-4">
-                    {cart.lines.map((item, i) => {
-                      const merchandiseSearchParams = {} as MerchandiseSearchParams;
+                  <ul className="grow overflow-auto py-4">
+                    {cart.lines
+                      .sort((a, b) =>
+                        a.merchandise.product.title.localeCompare(
+                          b.merchandise.product.title
+                        )
+                      )
+                      .map((item, i) => {
+                        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}`,
-                        new URLSearchParams(merchandiseSearchParams)
-                      );
+                        const merchandiseUrl = createUrl(
+                          `/product/${item.merchandise.product.handle}`,
+                          new URLSearchParams(merchandiseSearchParams)
+                        );
 
-                      return (
-                        <li
-                          key={i}
-                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
-                        >
-                          <div className="relative flex w-full flex-row justify-between px-1 py-4">
-                            <div className="absolute z-40 -mt-2 ml-[55px]">
-                              <DeleteItemButton item={item} />
-                            </div>
-                            <Link
-                              href={merchandiseUrl}
-                              onClick={closeCart}
-                              className="z-30 flex flex-row space-x-4"
-                            >
-                              <div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
-                                <Image
-                                  className="h-full w-full object-cover"
-                                  width={64}
-                                  height={64}
-                                  alt={
-                                    item.merchandise.product.featuredImage.altText ||
-                                    item.merchandise.product.title
-                                  }
-                                  src={item.merchandise.product.featuredImage.url}
+                        return (
+                          <li
+                            key={i}
+                            className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                          >
+                            <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}
                                 />
                               </div>
-
-                              <div className="flex flex-1 flex-col text-base">
-                                <span className="leading-tight">
-                                  {item.merchandise.product.title}
-                                </span>
-                                {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-neutral-500 dark:text-neutral-400">
-                                    {item.merchandise.title}
-                                  </p>
-                                ) : null}
+                              <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">
+                                  <Image
+                                    className="h-full w-full object-cover"
+                                    width={64}
+                                    height={64}
+                                    alt={
+                                      item.merchandise.product.featuredImage
+                                        .altText ||
+                                      item.merchandise.product.title
+                                    }
+                                    src={
+                                      item.merchandise.product.featuredImage.url
+                                    }
+                                  />
+                                </div>
+                                <Link
+                                  href={merchandiseUrl}
+                                  onClick={closeCart}
+                                  className="z-30 ml-2 flex flex-row space-x-4"
+                                >
+                                  <div className="flex flex-1 flex-col text-base">
+                                    <span className="leading-tight">
+                                      {item.merchandise.product.title}
+                                    </span>
+                                    {item.merchandise.title !==
+                                    DEFAULT_OPTION ? (
+                                      <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                                        {item.merchandise.title}
+                                      </p>
+                                    ) : null}
+                                  </div>
+                                </Link>
                               </div>
-                            </Link>
-                            <div className="flex h-16 flex-col justify-between">
-                              <Price
-                                className="flex justify-end space-y-2 text-right text-sm"
-                                amount={item.cost.totalAmount.amount}
-                                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 item={item} type="minus" />
-                                <p className="w-6 text-center">
-                                  <span className="w-full text-sm">{item.quantity}</span>
-                                </p>
-                                <EditItemQuantityButton item={item} type="plus" />
+                              <div className="flex h-16 flex-col justify-between">
+                                <Price
+                                  className="flex justify-end space-y-2 text-right text-sm"
+                                  amount={item.cost.totalAmount.amount}
+                                  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
+                                    item={item}
+                                    type="minus"
+                                    optimisticUpdate={updateCartItem}
+                                  />
+                                  <p className="w-6 text-center">
+                                    <span className="w-full text-sm">
+                                      {item.quantity}
+                                    </span>
+                                  </p>
+                                  <EditItemQuantityButton
+                                    item={item}
+                                    type="plus"
+                                    optimisticUpdate={updateCartItem}
+                                  />
+                                </div>
                               </div>
                             </div>
-                          </div>
-                        </li>
-                      );
-                    })}
+                          </li>
+                        );
+                      })}
                   </ul>
                   <div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
                     <div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
@@ -174,12 +215,9 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                       />
                     </div>
                   </div>
-                  <a
-                    href={cart.checkoutUrl}
-                    className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
-                  >
-                    Proceed to Checkout
-                  </a>
+                  <form action={redirectToCheckout}>
+                    <CheckoutButton />
+                  </form>
                 </div>
               )}
             </Dialog.Panel>
@@ -189,3 +227,30 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
     </>
   );
 }
+
+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();
+
+  return (
+    <button
+      className="block w-full rounded-full bg-blue-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
+      type="submit"
+      disabled={pending}
+    >
+      {pending ? <LoadingDots className="bg-white" /> : 'Proceed to Checkout'}
+    </button>
+  );
+}

components/cart/open-cart.tsx

@@ -11,11 +11,11 @@ export default function OpenCart({
   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">
       <ShoppingCartIcon
-        className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
+        className={clsx('h-4 transition-all ease-in-out hover:scale-110', className)}
       />
 
       {quantity ? (
-        <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">
+        <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">
           {quantity}
         </div>
       ) : null}

components/grid/three-items.tsx

@@ -16,7 +16,11 @@ function ThreeItemGridItem({
     <div
       className={size === 'full' ? 'md:col-span-4 md:row-span-2' : 'md:col-span-2 md:row-span-1'}
     >
-      <Link className="relative block aspect-square h-full w-full" href={`/product/${item.handle}`}>
+      <Link
+        className="relative block aspect-square h-full w-full"
+        href={`/product/${item.handle}`}
+        prefetch={true}
+      >
         <GridTileImage
           src={item.featuredImage.url}
           fill
@@ -48,7 +52,7 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="mx-auto grid max-w-screen-2xl gap-4 px-4 pb-4 md:grid-cols-6 md:grid-rows-2">
+    <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)]">
       <ThreeItemGridItem size="full" item={firstProduct} priority={true} />
       <ThreeItemGridItem size="half" item={secondProduct} priority={true} />
       <ThreeItemGridItem size="half" item={thirdProduct} />

components/grid/tile.tsx

@@ -29,7 +29,6 @@ export function GridTileImage({
       )}
     >
       {props.src ? (
-        // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
         <Image
           className={clsx('relative h-full w-full object-contain', {
             'transition duration-300 ease-in-out group-hover:scale-105': isInteractive

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 flex-grow pl-2 leading-none tracking-tight">{title}</h3>
+        <h3 className="mr-4 line-clamp-2 grow pl-2 leading-none tracking-tight">{title}</h3>
         <Price
           className="flex-none rounded-full bg-blue-600 p-2 text-white"
           amount={amount}

components/layout/footer-menu.tsx

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
-const FooterMenuItem = ({ item }: { item: Menu }) => {
+export function FooterMenuItem({ item }: { item: Menu }) {
   const pathname = usePathname();
   const [active, setActive] = useState(pathname === item.path);
 
@@ -19,7 +19,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
       <Link
         href={item.path}
         className={clsx(
-          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
           {
             'text-black dark:text-neutral-300': active
           }
@@ -29,7 +29,7 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
       </Link>
     </li>
   );
-};
+}
 
 export default function FooterMenu({ menu }: { menu: Menu[] }) {
   if (!menu.length) return null;

components/layout/footer.tsx

@@ -10,15 +10,15 @@ 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 bg-neutral-200 dark:bg-neutral-700';
+  const skeleton = 'w-full h-6 animate-pulse rounded-sm bg-neutral-200 dark:bg-neutral-700';
   const menu = await getMenu('next-js-frontend-footer-menu');
   const copyrightName = COMPANY_NAME || SITE_NAME || '';
 
   return (
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
         <div>
-          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
+          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>
@@ -50,17 +50,18 @@ export default async function Footer() {
         </div>
       </div>
       <div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
-        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 xl:px-0">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0">
           <p>
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
           <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
-          <p>Designed in California</p>
+          <p>
+            <a href="https://github.com/vercel/commerce">View the source</a>
+          </p>
           <p className="md:ml-auto">
-            Crafted by{' '}
             <a href="https://vercel.com" className="text-black dark:text-white">
-              ▲ Vercel
+              Created by ▲ Vercel
             </a>
           </p>
         </div>

components/layout/navbar/index.tsx

@@ -1,25 +1,31 @@
-import Cart from 'components/cart';
-import OpenCart from 'components/cart/open-cart';
+import CartModal from 'components/cart/modal';
 import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
 import Link from 'next/link';
 import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
+
 const { SITE_NAME } = process.env;
 
-export default async function Navbar() {
+export async function Navbar() {
   const menu = await getMenu('next-js-frontend-header-menu');
 
   return (
     <nav className="relative flex items-center justify-between p-4 lg:px-6">
       <div className="block flex-none md:hidden">
-        <MobileMenu menu={menu} />
+        <Suspense fallback={null}>
+          <MobileMenu menu={menu} />
+        </Suspense>
       </div>
       <div className="flex w-full items-center">
         <div className="flex w-full md:w-1/3">
-          <Link href="/" className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6">
+          <Link
+            href="/"
+            prefetch={true}
+            className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+          >
             <LogoSquare />
             <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
               {SITE_NAME}
@@ -31,6 +37,7 @@ export default async function Navbar() {
                 <li key={item.title}>
                   <Link
                     href={item.path}
+                    prefetch={true}
                     className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
                   >
                     {item.title}
@@ -41,12 +48,12 @@ export default async function Navbar() {
           ) : null}
         </div>
         <div className="hidden justify-center md:flex md:w-1/3">
-          <Search />
+          <Suspense fallback={<SearchSkeleton />}>
+            <Search />
+          </Suspense>
         </div>
         <div className="flex justify-end md:w-1/3">
-          <Suspense fallback={<OpenCart />}>
-            <Cart />
-          </Suspense>
+          <CartModal />
         </div>
       </div>
     </nav>

components/layout/navbar/mobile-menu.tsx

@@ -3,11 +3,11 @@
 import { Dialog, Transition } from '@headlessui/react';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, Suspense, useEffect, useState } from 'react';
 
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Menu } from 'lib/shopify/types';
-import Search from './search';
+import Search, { SearchSkeleton } from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {
   const pathname = usePathname();
@@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
       <button
         onClick={openMobileMenu}
         aria-label="Open mobile menu"
-        className="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 md:hidden"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
       >
         <Bars3Icon className="h-4" />
       </button>
@@ -72,7 +72,9 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                 </button>
 
                 <div className="mb-4 w-full">
-                  <Search />
+                  <Suspense fallback={<SearchSkeleton />}>
+                    <Search />
+                  </Suspense>
                 </div>
                 {menu.length ? (
                   <ul className="flex w-full flex-col">
@@ -81,7 +83,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
                         className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
                         key={item.title}
                       >
-                        <Link href={item.path} onClick={closeMobileMenu}>
+                        <Link href={item.path} prefetch={true} onClick={closeMobileMenu}>
                           {item.title}
                         </Link>
                       </li>

components/layout/navbar/search.tsx

@@ -1,45 +1,35 @@
 'use client';
 
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { createUrl } from 'lib/utils';
+import Form from 'next/form';
+import { useSearchParams } from 'next/navigation';
 
 export default function Search() {
-  const router = useRouter();
   const searchParams = useSearchParams();
-  const [searchValue, setSearchValue] = useState('');
-
-  useEffect(() => {
-    setSearchValue(searchParams?.get('q') || '');
-  }, [searchParams, setSearchValue]);
-
-  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault();
-
-    const val = e.target as HTMLFormElement;
-    const search = val.search as HTMLInputElement;
-    const newParams = new URLSearchParams(searchParams.toString());
-
-    if (search.value) {
-      newParams.set('q', search.value);
-    } else {
-      newParams.delete('q');
-    }
-
-    router.push(createUrl('/search', newParams));
-  }
 
   return (
-    <form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+    <Form action="/search" className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
       <input
+        key={searchParams?.get('q')}
         type="text"
-        name="search"
+        name="q"
         placeholder="Search for products..."
         autoComplete="off"
-        value={searchValue}
-        onChange={(e) => setSearchValue(e.target.value)}
+        defaultValue={searchParams?.get('q') || ''}
+        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+      />
+      <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
+        <MagnifyingGlassIcon className="h-4" />
+      </div>
+    </Form>
+  );
+}
+
+export function SearchSkeleton() {
+  return (
+    <form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
+      <input
+        placeholder="Search for products..."
         className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">

components/layout/product-grid-items.tsx

@@ -8,7 +8,11 @@ export default function ProductGridItems({ products }: { products: Product[] })
     <>
       {products.map((product) => (
         <Grid.Item key={product.handle} className="animate-fadeIn">
-          <Link className="relative inline-block h-full w-full" href={`/product/${product.handle}`}>
+          <Link
+            className="relative inline-block h-full w-full"
+            href={`/product/${product.handle}`}
+            prefetch={true}
+          >
             <GridTileImage
               alt={product.title}
               label={{

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

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 border border-black/30 px-4 py-2 text-sm dark:border-white/30"
+        className="flex w-full items-center justify-between rounded-sm border border-black/30 px-4 py-2 text-sm dark:border-white/30"
       >
         <div>{active}</div>
         <ChevronDownIcon className="h-4" />

components/layout/search/filter/index.tsx

@@ -1,4 +1,5 @@
 import { SortFilterItem } from 'lib/constants';
+import { Suspense } from 'react';
 import FilterItemDropdown from './dropdown';
 import { FilterItem } from './item';
 
@@ -19,12 +20,20 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
   return (
     <>
       <nav>
-        {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
+        {title ? (
+          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
+            {title}
+          </h3>
+        ) : null}
         <ul className="hidden md:block">
-          <FilterItemList list={list} />
+          <Suspense fallback={null}>
+            <FilterItemList list={list} />
+          </Suspense>
         </ul>
         <ul className="md:hidden">
-          <FilterItemDropdown list={list} />
+          <Suspense fallback={null}>
+            <FilterItemDropdown list={list} />
+          </Suspense>
         </ul>
       </nav>
     </>

components/layout/search/filter/item.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { SortFilterItem } from 'lib/constants';
+import type { SortFilterItem } from 'lib/constants';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useSearchParams } from 'next/navigation';

components/opengraph-image.tsx

@@ -1,11 +1,15 @@
-import { ImageResponse } from 'next/server';
+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
@@ -13,6 +17,9 @@ export default async function OpengraphImage(props?: Props): Promise<ImageRespon
     ...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">
@@ -28,9 +35,7 @@ export default async function OpengraphImage(props?: Props): Promise<ImageRespon
       fonts: [
         {
           name: 'Inter',
-          data: await fetch(new URL('../fonts/Inter-Bold.ttf', import.meta.url)).then((res) =>
-            res.arrayBuffer()
-          ),
+          data: font,
           style: 'normal',
           weight: 700
         }

components/product/gallery.tsx

@@ -2,32 +2,22 @@
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
 import { GridTileImage } from 'components/grid/tile';
-import { createUrl } from 'lib/utils';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
 import Image from 'next/image';
-import Link from 'next/link';
-import { usePathname, useSearchParams } from 'next/navigation';
 
 export function Gallery({ images }: { images: { src: string; altText: string }[] }) {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const imageSearchParam = searchParams.get('image');
-  const imageIndex = imageSearchParam ? parseInt(imageSearchParam) : 0;
+  const { state, updateImage } = useProduct();
+  const updateURL = useUpdateURL();
+  const imageIndex = state.image ? parseInt(state.image) : 0;
 
-  const nextSearchParams = new URLSearchParams(searchParams.toString());
   const nextImageIndex = imageIndex + 1 < images.length ? imageIndex + 1 : 0;
-  nextSearchParams.set('image', nextImageIndex.toString());
-  const nextUrl = createUrl(pathname, nextSearchParams);
-
-  const previousSearchParams = new URLSearchParams(searchParams.toString());
   const previousImageIndex = imageIndex === 0 ? images.length - 1 : imageIndex - 1;
-  previousSearchParams.set('image', previousImageIndex.toString());
-  const previousUrl = createUrl(pathname, previousSearchParams);
 
   const buttonClassName =
     'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
 
   return (
-    <>
+    <form>
       <div className="relative aspect-square h-full max-h-[550px] w-full overflow-hidden">
         {images[imageIndex] && (
           <Image
@@ -42,43 +32,46 @@ 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 dark:border-black dark:bg-neutral-900/80">
-              <Link
+            <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">
+              <button
+                formAction={() => {
+                  const newState = updateImage(previousImageIndex.toString());
+                  updateURL(newState);
+                }}
                 aria-label="Previous product image"
-                href={previousUrl}
                 className={buttonClassName}
-                scroll={false}
               >
                 <ArrowLeftIcon className="h-5" />
-              </Link>
+              </button>
               <div className="mx-1 h-6 w-px bg-neutral-500"></div>
-              <Link
+              <button
+                formAction={() => {
+                  const newState = updateImage(nextImageIndex.toString());
+                  updateURL(newState);
+                }}
                 aria-label="Next product image"
-                href={nextUrl}
                 className={buttonClassName}
-                scroll={false}
               >
                 <ArrowRightIcon className="h-5" />
-              </Link>
+              </button>
             </div>
           </div>
         ) : null}
       </div>
 
       {images.length > 1 ? (
-        <ul className="my-12 flex items-center justify-center gap-2 overflow-auto py-1 lg:mb-0">
+        <ul className="my-12 flex items-center flex-wrap justify-center gap-2 overflow-auto py-1 lg:mb-0">
           {images.map((image, index) => {
             const isActive = index === imageIndex;
-            const imageSearchParams = new URLSearchParams(searchParams.toString());
-
-            imageSearchParams.set('image', index.toString());
 
             return (
               <li key={image.src} className="h-20 w-20">
-                <Link
-                  aria-label="Enlarge product image"
-                  href={createUrl(pathname, imageSearchParams)}
-                  scroll={false}
+                <button
+                  formAction={() => {
+                    const newState = updateImage(index.toString());
+                    updateURL(newState);
+                  }}
+                  aria-label="Select product image"
                   className="h-full w-full"
                 >
                   <GridTileImage
@@ -88,12 +81,12 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
                     height={80}
                     active={isActive}
                   />
-                </Link>
+                </button>
               </li>
             );
           })}
         </ul>
       ) : null}
-    </>
+    </form>
   );
 }

components/product/product-context.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import React, { createContext, useContext, useMemo, useOptimistic } from 'react';
+
+type ProductState = {
+  [key: string]: string;
+} & {
+  image?: string;
+};
+
+type ProductContextType = {
+  state: ProductState;
+  updateOption: (name: string, value: string) => ProductState;
+  updateImage: (index: string) => ProductState;
+};
+
+const ProductContext = createContext<ProductContextType | undefined>(undefined);
+
+export function ProductProvider({ children }: { children: React.ReactNode }) {
+  const searchParams = useSearchParams();
+
+  const getInitialState = () => {
+    const params: ProductState = {};
+    for (const [key, value] of searchParams.entries()) {
+      params[key] = value;
+    }
+    return params;
+  };
+
+  const [state, setOptimisticState] = useOptimistic(
+    getInitialState(),
+    (prevState: ProductState, update: ProductState) => ({
+      ...prevState,
+      ...update
+    })
+  );
+
+  const updateOption = (name: string, value: string) => {
+    const newState = { [name]: value };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const updateImage = (index: string) => {
+    const newState = { image: index };
+    setOptimisticState(newState);
+    return { ...state, ...newState };
+  };
+
+  const value = useMemo(
+    () => ({
+      state,
+      updateOption,
+      updateImage
+    }),
+    [state]
+  );
+
+  return <ProductContext.Provider value={value}>{children}</ProductContext.Provider>;
+}
+
+export function useProduct() {
+  const context = useContext(ProductContext);
+  if (context === undefined) {
+    throw new Error('useProduct must be used within a ProductProvider');
+  }
+  return context;
+}
+
+export function useUpdateURL() {
+  const router = useRouter();
+
+  return (state: ProductState) => {
+    const newParams = new URLSearchParams(window.location.search);
+    Object.entries(state).forEach(([key, value]) => {
+      newParams.set(key, value);
+    });
+    router.push(`?${newParams.toString()}`, { scroll: false });
+  };
+}

components/product/product-description.tsx

@@ -17,15 +17,13 @@ export function ProductDescription({ product }: { product: Product }) {
         </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} />
+      <AddToCart product={product} />
     </>
   );
 }

components/product/variant-selector.tsx

@@ -1,14 +1,13 @@
 'use client';
 
 import clsx from 'clsx';
+import { useProduct, useUpdateURL } from 'components/product/product-context';
 import { ProductOption, ProductVariant } from 'lib/shopify/types';
-import { createUrl } from 'lib/utils';
-import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 type Combination = {
   id: string;
   availableForSale: boolean;
-  [key: string]: string | boolean; // ie. { color: 'Red', size: 'Large', ... }
+  [key: string]: string | boolean;
 };
 
 export function VariantSelector({
@@ -18,9 +17,8 @@ export function VariantSelector({
   options: ProductOption[];
   variants: ProductVariant[];
 }) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
+  const { state, updateOption } = useProduct();
+  const updateURL = useUpdateURL();
   const hasNoOptionsOrJustOneOption =
     !options.length || (options.length === 1 && options[0]?.values.length === 1);
 
@@ -31,7 +29,6 @@ export function VariantSelector({
   const combinations: Combination[] = variants.map((variant) => ({
     id: variant.id,
     availableForSale: variant.availableForSale,
-    // Adds key / value pairs for each variant (ie. "color": "Black" and "size": 'M").
     ...variant.selectedOptions.reduce(
       (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }),
       {}
@@ -39,68 +36,58 @@ export function VariantSelector({
   }));
 
   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) => {
-          const optionNameLowerCase = option.name.toLowerCase();
+    <form key={option.id}>
+      <dl className="mb-8">
+        <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt>
+        <dd className="flex flex-wrap gap-3">
+          {option.values.map((value) => {
+            const optionNameLowerCase = option.name.toLowerCase();
 
-          // Base option params on current params so we can preserve any other param state in the url.
-          const optionSearchParams = new URLSearchParams(searchParams.toString());
+            // Base option params on current selectedOptions so we can preserve any other param state.
+            const optionParams = { ...state, [optionNameLowerCase]: value };
 
-          // Update the option params using the current option to reflect how the url *would* change,
-          // if the option was clicked.
-          optionSearchParams.set(optionNameLowerCase, value);
-          const optionUrl = createUrl(pathname, optionSearchParams);
+            // Filter out invalid options and check if the option combination is available for sale.
+            const filtered = Object.entries(optionParams).filter(([key, value]) =>
+              options.find(
+                (option) => option.name.toLowerCase() === key && option.values.includes(value)
+              )
+            );
+            const isAvailableForSale = combinations.find((combination) =>
+              filtered.every(
+                ([key, value]) => combination[key] === value && combination.availableForSale
+              )
+            );
 
-          // In order to determine if an option is available for sale, we need to:
-          //
-          // 1. Filter out all other param state
-          // 2. Filter out invalid options
-          // 3. Check if the option combination is available for sale
-          //
-          // This is the "magic" that will cross check possible variant combinations and preemptively
-          // disable combinations that are not available. For example, if the color gray is only available in size medium,
-          // then all other sizes should be disabled.
-          const filtered = Array.from(optionSearchParams.entries()).filter(([key, value]) =>
-            options.find(
-              (option) => option.name.toLowerCase() === key && option.values.includes(value)
-            )
-          );
-          const isAvailableForSale = combinations.find((combination) =>
-            filtered.every(
-              ([key, value]) => combination[key] === value && combination.availableForSale
-            )
-          );
+            // The option is active if it's in the selected options.
+            const isActive = state[optionNameLowerCase] === value;
 
-          // The option is active if it's in the url params.
-          const isActive = searchParams.get(optionNameLowerCase) === value;
-
-          return (
-            <button
-              key={value}
-              aria-disabled={!isAvailableForSale}
-              disabled={!isAvailableForSale}
-              onClick={() => {
-                router.replace(optionUrl, { scroll: false });
-              }}
-              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
-                }
-              )}
-            >
-              {value}
-            </button>
-          );
-        })}
-      </dd>
-    </dl>
+            return (
+              <button
+                formAction={() => {
+                  const newState = updateOption(optionNameLowerCase, value);
+                  updateURL(newState);
+                }}
+                key={value}
+                aria-disabled={!isAvailableForSale}
+                disabled={!isAvailableForSale}
+                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: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':
+                      !isAvailableForSale
+                  }
+                )}
+              >
+                {value}
+              </button>
+            );
+          })}
+        </dd>
+      </dl>
+    </form>
   ));
 }

components/prose.tsx

@@ -1,19 +1,13 @@
 import clsx from 'clsx';
-import type { FunctionComponent } from 'react';
 
-interface TextProps {
-  html: string;
-  className?: string;
-}
-
-const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
+const Prose = ({ html, className }: { html: string; className?: string }) => {
   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 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',
+        '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',
         className
       )}
-      dangerouslySetInnerHTML={{ __html: html as string }}
+      dangerouslySetInnerHTML={{ __html: html }}
     />
   );
 };

components/welcome-toast.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { toast } from 'sonner';
+
+export function WelcomeToast() {
+  useEffect(() => {
+    // ignore if screen height is too small
+    if (window.innerHeight < 650) return;
+    if (!document.cookie.includes('welcome-toast=2')) {
+      toast('🛍️ Welcome to Next.js Commerce!', {
+        id: 'welcome-toast',
+        duration: Infinity,
+        onDismiss: () => {
+          document.cookie = 'welcome-toast=2; max-age=31536000; path=/';
+        },
+        description: (
+          <>
+            This is a high-performance, SSR storefront powered by Shopify, Next.js, and Vercel.{' '}
+            <a
+              href="https://vercel.com/templates/next.js/nextjs-commerce"
+              className="text-blue-600 hover:underline"
+              target="_blank"
+            >
+              Deploy your own
+            </a>
+            .
+          </>
+        )
+      });
+    }
+  }, []);
+
+  return null;
+}

lib/constants.ts

@@ -22,7 +22,8 @@ export const sorting: SortFilterItem[] = [
 
 export const TAGS = {
   collections: 'collections',
-  products: 'products'
+  products: 'products',
+  cart: 'cart'
 };
 
 export const HIDDEN_PRODUCT_TAG = 'nextjs-frontend-hidden';

lib/shopify/index.ts

@@ -1,8 +1,16 @@
-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 } from 'next/cache';
-import { headers } from 'next/headers';
+import {
+  revalidateTag,
+  unstable_cacheTag as cacheTag,
+  unstable_cacheLife as cacheLife
+} from 'next/cache';
+import { cookies, headers } from 'next/headers';
 import { NextRequest, NextResponse } from 'next/server';
 import {
   addToCartMutation,
@@ -56,19 +64,17 @@ 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 {
@@ -82,9 +88,7 @@ export async function shopifyFetch<T>({
       body: JSON.stringify({
         ...(query && { query }),
         ...(variables && { variables })
-      }),
-      cache,
-      ...(tags && { next: { tags } })
+      })
     });
 
     const body = await result.json();
@@ -114,7 +118,7 @@ export async function shopifyFetch<T>({
   }
 }
 
-const removeEdgesAndNodes = (array: Connection<any>) => {
+const removeEdgesAndNodes = <T>(array: Connection<T>): T[] => {
   return array.edges.map((edge) => edge?.node);
 };
 
@@ -122,7 +126,7 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
   if (!cart.cost?.totalTaxAmount) {
     cart.cost.totalTaxAmount = {
       amount: '0.0',
-      currencyCode: 'USD'
+      currencyCode: cart.cost.totalAmount.currencyCode
     };
   }
 
@@ -132,7 +136,9 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
   };
 };
 
-const reshapeCollection = (collection: ShopifyCollection): Collection | undefined => {
+const reshapeCollection = (
+  collection: ShopifyCollection
+): Collection | undefined => {
   if (!collection) {
     return undefined;
   }
@@ -163,7 +169,7 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
   const flattened = removeEdgesAndNodes(images);
 
   return flattened.map((image) => {
-    const filename = image.url.match(/.*\/(.*)\..*/)[1];
+    const filename = image.url.match(/.*\/(.*)\..*/)?.[1];
     return {
       ...image,
       altText: image.altText || `${productTitle} - ${filename}`
@@ -171,8 +177,14 @@ 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;
   }
 
@@ -203,62 +215,64 @@ const reshapeProducts = (products: ShopifyProduct[]) => {
 
 export async function createCart(): Promise<Cart> {
   const res = await shopifyFetch<ShopifyCreateCartOperation>({
-    query: createCartMutation,
-    cache: 'no-store'
+    query: createCartMutation
   });
 
   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(cartId: string, lineIds: string[]): Promise<Cart> {
+export async function removeFromCart(lineIds: string[]): Promise<Cart> {
+  const cartId = (await cookies()).get('cartId')?.value!;
   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(cartId: string): Promise<Cart | undefined> {
+export async function getCart(): Promise<Cart | undefined> {
+  const cartId = (await cookies()).get('cartId')?.value;
+
+  if (!cartId) {
+    return undefined;
+  }
+
   const res = await shopifyFetch<ShopifyCartOperation>({
     query: getCartQuery,
-    variables: { cartId },
-    cache: 'no-store'
+    variables: { cartId }
   });
 
   // Old carts becomes `null` when you checkout.
@@ -269,10 +283,15 @@ export async function getCart(cartId: string): Promise<Cart | undefined> {
   return reshapeCart(res.body.data.cart);
 }
 
-export async function getCollection(handle: string): Promise<Collection | undefined> {
+export async function getCollection(
+  handle: string
+): Promise<Collection | undefined> {
+  'use cache';
+  cacheTag(TAGS.collections);
+  cacheLife('days');
+
   const res = await shopifyFetch<ShopifyCollectionOperation>({
     query: getCollectionQuery,
-    tags: [TAGS.collections],
     variables: {
       handle
     }
@@ -290,9 +309,12 @@ 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,
@@ -305,13 +327,18 @@ 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,
-    tags: [TAGS.collections]
+    query: getCollectionsQuery
   });
   const shopifyCollections = removeEdgesAndNodes(res.body?.data?.collections);
   const collections = [
@@ -337,9 +364,12 @@ 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
     }
@@ -348,7 +378,10 @@ 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', '')
     })) || []
   );
 }
@@ -371,9 +404,12 @@ export async function getPages(): Promise<Page[]> {
 }
 
 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
     }
@@ -382,10 +418,15 @@ export async function getProduct(handle: string): Promise<Product | undefined> {
   return reshapeProduct(res.body.data.product, false);
 }
 
-export async function getProductRecommendations(productId: string): Promise<Product[]> {
+export async function getProductRecommendations(
+  productId: string
+): Promise<Product[]> {
+  'use cache';
+  cacheTag(TAGS.products);
+  cacheLife('days');
+
   const res = await shopifyFetch<ShopifyProductRecommendationsOperation>({
     query: getProductRecommendationsQuery,
-    tags: [TAGS.products],
     variables: {
       productId
     }
@@ -403,9 +444,12 @@ 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,
@@ -420,16 +464,24 @@ 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 = headers().get('x-shopify-topic') || 'unknown';
+  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 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: 200 });
+    return NextResponse.json({ status: 401 });
   }
 
   if (!isCollectionUpdate && !isProductUpdate) {

lib/shopify/types.ts

@@ -12,8 +12,15 @@ export type Cart = Omit<ShopifyCart, 'lines'> & {
   lines: CartItem[];
 };
 
-export type CartItem = {
+export type CartProduct = {
   id: string;
+  handle: string;
+  title: string;
+  featuredImage: Image;
+};
+
+export type CartItem = {
+  id: string | undefined;
   quantity: number;
   cost: {
     totalAmount: Money;
@@ -25,7 +32,7 @@ export type CartItem = {
       name: string;
       value: string;
     }[];
-    product: Product;
+    product: CartProduct;
   };
 };
 
@@ -89,7 +96,7 @@ export type SEO = {
 };
 
 export type ShopifyCart = {
-  id: string;
+  id: string | undefined;
   checkoutUrl: string;
   cost: {
     subtotalAmount: Money;

lib/utils.ts

@@ -1,6 +1,13 @@
 import { ReadonlyURLSearchParams } from 'next/navigation';
 
-export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyURLSearchParams) => {
+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
+) => {
   const paramsString = params.toString();
   const queryString = `${paramsString.length ? '?' : ''}${paramsString}`;
 
@@ -8,4 +15,37 @@ export const createUrl = (pathname: string, params: URLSearchParams | ReadonlyUR
 };
 
 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 missingEnvironmentVariables = [] as string[];
+
+  requiredEnvironmentVariables.forEach((envVar) => {
+    if (!process.env[envVar]) {
+      missingEnvironmentVariables.push(envVar);
+    }
+  });
+
+  if (missingEnvironmentVariables.length) {
+    throw new Error(
+      `The following environment variables are missing. Your site will not work without them. Read more: https://vercel.com/docs/integrations/shopify#configure-environment-variables\n\n${missingEnvironmentVariables.join(
+        '\n'
+      )}\n`
+    );
+  }
+
+  if (
+    process.env.SHOPIFY_STORE_DOMAIN?.includes('[') ||
+    process.env.SHOPIFY_STORE_DOMAIN?.includes(']')
+  ) {
+    throw new Error(
+      'Your `SHOPIFY_STORE_DOMAIN` environment variable includes brackets (ie. `[` and / or `]`). Your site will not work with them there. Please remove them.'
+    );
+  }
+};

license.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 Vercel, Inc.
+Copyright (c) 2025 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

next.config.js

@@ -1,29 +0,0 @@
-/** @type {import('next').NextConfig} */
-module.exports = {
-  eslint: {
-    // Disabling on production builds because we're running checks on PRs via GitHub Actions.
-    ignoreDuringBuilds: true
-  },
-  experimental: {
-    serverActions: true
-  },
-  images: {
-    formats: ['image/avif', 'image/webp'],
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'cdn.shopify.com',
-        pathname: '/s/files/**'
-      }
-    ]
-  },
-  async redirects() {
-    return [
-      {
-        source: '/password',
-        destination: '/',
-        permanent: true
-      }
-    ];
-  }
-};

next.config.ts

@@ -0,0 +1,19 @@
+export default {
+  experimental: {
+    ppr: true,
+    inlineCss: true,
+    useCache: true,
+    reactOwnerStack: true,
+    newDevOverlay: true
+  },
+  images: {
+    formats: ['image/avif', 'image/webp'],
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'cdn.shopify.com',
+        pathname: '/s/files/**'
+      }
+    ]
+  }
+};

package.json

@@ -1,51 +1,34 @@
 {
   "private": true,
-  "packageManager": "pnpm@8.2.0",
-  "engines": {
-    "node": ">=18",
-    "pnpm": ">=7"
-  },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint-staged": "lint-staged",
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
-    "test": "pnpm lint && pnpm prettier:check"
-  },
-  "git": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*": "prettier --write --ignore-unknown"
+    "test": "pnpm prettier:check"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.15",
-    "@heroicons/react": "^2.0.18",
-    "clsx": "^2.0.0",
-    "next": "13.4.13-canary.15",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "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"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "20.4.4",
-    "@types/react": "18.2.16",
-    "@types/react-dom": "18.2.7",
-    "@vercel/git-hooks": "^1.0.0",
-    "autoprefixer": "^10.4.14",
-    "eslint": "^8.45.0",
-    "eslint-config-next": "^13.4.12",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-unicorn": "^48.0.0",
-    "lint-staged": "^13.2.3",
-    "postcss": "^8.4.27",
-    "prettier": "3.0.1",
-    "prettier-plugin-tailwindcss": "^0.4.1",
-    "tailwindcss": "^3.3.3",
-    "typescript": "5.1.6"
+    "@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"
   }
 }

postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
-  }
-};

postcss.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  }
+};

prettier.config.js

@@ -1,10 +0,0 @@
-module.exports = {
-  singleQuote: true,
-  arrowParens: 'always',
-  trailingComma: 'none',
-  printWidth: 100,
-  tabWidth: 2,
-  // pnpm doesn't support plugin autoloading
-  // https://github.com/tailwindlabs/prettier-plugin-tailwindcss#installation
-  plugins: [require('prettier-plugin-tailwindcss')]
-};

tailwind.config.js

@@ -1,54 +0,0 @@
-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-inter)']
-      },
-      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')
-        }
-      );
-    })
-  ]
-};

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "downlevelIteration": true,
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,