merge-ppr-branch-into-narai-commerce

app/[locale]/about/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/about/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import AboutNaraiDetail from './about-narai-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -43,9 +39,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <AboutNaraiDetail awards={awardsPage.body} />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/add-to-cart-ppr.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+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 { useSearchParams } from 'next/navigation';
+import React from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
+
+function SubmitButton({
+  availableForSale,
+  selectedVariantId
+}: {
+  availableForSale: boolean;
+  selectedVariantId: string | undefined;
+}) {
+  const { pending } = useFormStatus();
+  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 aria-disabled className={clsx(buttonClasses, disabledClasses)}>
+        Out Of Stock
+      </button>
+    );
+  }
+
+  if (!selectedVariantId) {
+    return (
+      <button
+        aria-label="Please select an option"
+        aria-disabled
+        className={clsx(buttonClasses, disabledClasses)}
+      >
+        <div className="absolute left-0 ml-4">
+          <PlusIcon className="h-5" />
+        </div>
+        Add To Cart
+      </button>
+    );
+  }
+
+  return (
+    <button
+      onClick={(e: React.FormEvent<HTMLButtonElement>) => {
+        if (pending) e.preventDefault();
+      }}
+      aria-label="Add to cart"
+      aria-disabled={pending}
+      className={clsx(buttonClasses, {
+        'hover:opacity-90': true,
+        disabledClasses: pending
+      })}
+    >
+      <div className="absolute left-0 ml-4">
+        {pending ? <LoadingDots className="mb-3 bg-white" /> : <PlusIcon className="h-5" />}
+      </div>
+      Add To Cart
+    </button>
+  );
+}
+
+export function AddToCart({
+  variants,
+  availableForSale
+}: {
+  variants: ProductVariant[];
+  availableForSale: boolean;
+}) {
+  const [message, formAction] = useFormState(addItem, null);
+  const searchParams = useSearchParams();
+  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 actionWithVariant = formAction.bind(null, selectedVariantId);
+
+  return (
+    <form action={actionWithVariant}>
+      <SubmitButton availableForSale={availableForSale} selectedVariantId={selectedVariantId} />
+      <p aria-live="polite" className="sr-only" role="status">
+        {message}
+      </p>
+    </form>
+  );
+}

app/[locale]/bar/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/bar/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import SagyobarDetail from './sagyobar-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <SagyobarDetail />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/company/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/company/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import CompanyDetail from './company-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <CompanyDetail />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/concept/layout.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/concept/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import ConceptDetail from './concept-detail';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -41,9 +37,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <ConceptDetail />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/disclosures/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import Disclosures from './disclosures';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function DisclosuresPage({
         <Disclosures />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/layout.tsx

@@ -1,106 +0,0 @@
-import { Lato, Noto_Serif_JP } from 'next/font/google';
-import localFont from 'next/font/local';
-import { ReactNode, Suspense } from 'react';
-
-import { SupportedLocale } from 'components/layout/navbar/language-control';
-import { NextIntlClientProvider } from 'next-intl';
-import { notFound } from 'next/navigation';
-import Analytics from './analytics';
-import './globals.css';
-
-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';
-
-export const metadata = {
-  metadataBase: new URL(baseUrl),
-  title: {
-    default: SITE_NAME!,
-    template: `%s | ${SITE_NAME}`
-  },
-  robots: {
-    follow: true,
-    index: true
-  },
-  ...(TWITTER_CREATOR &&
-    TWITTER_SITE && {
-      twitter: {
-        card: 'summary_large_image',
-        creator: TWITTER_CREATOR,
-        site: TWITTER_SITE
-      }
-    })
-};
-
-// Font files can be colocated inside of `app`
-const cinzel = localFont({
-  src: '../fonts/Cinzel-Regular.ttf',
-  display: 'swap',
-  variable: '--font-cinzel'
-});
-
-const alpina = localFont({
-  src: [
-    {
-      path: '../fonts/GT-Alpina-Regular-Trial.woff2',
-      weight: '400',
-      style: 'normal'
-    },
-    {
-      path: '../fonts/GT-Alpina-Bold-Trial.woff2',
-      weight: '700',
-      style: 'normal'
-    }
-  ],
-  variable: '--font-alpina'
-});
-
-const lato = Lato({
-  subsets: ['latin'],
-  display: 'swap',
-  weight: ['300'],
-  variable: '--font-lato'
-});
-
-const noto = Noto_Serif_JP({
-  subsets: ['latin'],
-  display: 'swap',
-  weight: ['200', '400', '600'],
-  variable: '--font-noto'
-});
-
-export function generateStaticParams() {
-  return [{ locale: 'ja' }, { locale: 'en' }];
-}
-
-export default async function RootLayout({
-  children,
-  params
-}: {
-  children: ReactNode;
-  params: { locale?: SupportedLocale };
-}) {
-  let messages;
-  try {
-    messages = (await import(`../../messages/${params?.locale}.json`)).default;
-  } catch (error) {
-    notFound();
-  }
-
-  return (
-    <html
-      lang={params.locale}
-      className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
-    >
-      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
-        <NextIntlClientProvider locale={params?.locale} messages={messages}>
-          <Suspense>
-            <Analytics />
-            <main>{children}</main>
-          </Suspense>
-        </NextIntlClientProvider>
-      </body>
-    </html>
-  );
-}

app/[locale]/opengraph-image.tsx

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

app/[locale]/page.tsx

@@ -24,10 +24,6 @@ import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import Image from 'next/image';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -152,9 +148,7 @@ export default async function HomePage({
         />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} promotedItem={promotedItem} />
-        <Footer cart={cart} promotedItem={promotedItem} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/privacy/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import PrivacyPolicy from './privacy-policy';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function PrivacyPage({
         <PrivacyPolicy />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/product/[handle]/layout.tsx

@@ -4,10 +4,7 @@ import { SupportedLocale } from 'components/layout/navbar/language-control';
 import Navbar from 'components/layout/navbar';
 import { getCart } from 'lib/shopify';
 import { cookies } from 'next/headers';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -37,9 +34,7 @@ export default async function ProductLayout({
     <div>
       <Navbar cart={cart} locale={locale} compact />
       {children}
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/product/[handle]/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 
 import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
@@ -17,9 +16,7 @@ import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image as MediaImage, Product } from 'lib/shopify/types';
 import Image from 'next/image';
 import Link from 'next/link';
-
+import { Suspense } from 'react';
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 export async function generateMetadata({
   params
@@ -136,13 +133,17 @@ export default async function ProductPage({
                 </div>
 
                 <div className="max-w-sm">
-                  <VariantSelector options={product.options} variants={product.variants} />
+                  <Suspense>
+                    <VariantSelector options={product.options} variants={product.variants} />
+                  </Suspense>
 
-                  <AddManyToCart
+                  <Suspense>
-                    quantity={1}
+                    <AddManyToCart
-                    variants={product.variants}
+                      quantity={1}
-                    availableForSale={product.availableForSale}
+                      variants={product.variants}
-                  />
+                      availableForSale={product.availableForSale}
+                    />
+                  </Suspense>
                 </div>
 
                 <div className="border-b border-white/20 pb-6"></div>
@@ -165,30 +166,32 @@ export default async function ProductPage({
           )}
 
           <div className="grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:px-0">
-            {!!otherImages &&
+            <Suspense fallback={null}>
-              otherImages?.length > 0 &&
+              {!!otherImages &&
-              otherImages.map((image, index) => {
+                otherImages?.length > 0 &&
-                const isOdd = otherImages.length % 2 != 0;
+                otherImages.map((image, index) => {
-                const isLast = index === otherImages.length - 1;
+                  const isOdd = otherImages.length % 2 != 0;
-                const isOddAndLast = isOdd && isLast;
+                  const isLast = index === otherImages.length - 1;
-                return (
+                  const isOddAndLast = isOdd && isLast;
-                  <div
+                  return (
-                    key={image.url}
+                    <div
-                    className={clsx(
+                      key={image.url}
-                      isOddAndLast ? 'col-span-1 md:col-span-2' : 'col-span-1 aspect-square',
+                      className={clsx(
-                      'relative h-full w-full bg-gray-900/10'
+                        isOddAndLast ? 'col-span-1 md:col-span-2' : 'col-span-1 aspect-square',
-                    )}
+                        'relative h-full w-full bg-gray-900/10'
-                  >
+                      )}
-                    <Image
+                    >
-                      src={image.url}
+                      <Image
-                      alt={image.altText}
+                        src={image.url}
-                      height={image.height}
+                        alt={image.altText}
-                      width={image.width}
+                        height={image.height}
-                      className="h-full w-full object-cover"
+                        width={image.width}
-                    />
+                        className="h-full w-full object-cover"
-                  </div>
+                      />
-                );
+                    </div>
-              })}
+                  );
+                })}
+            </Suspense>
           </div>
 
           {!!product?.lower?.value && (
@@ -197,9 +200,7 @@ export default async function ProductPage({
             </div>
           )}
 
-          <Suspense>
+          <RelatedProducts id={product.id} />
-            <RelatedProducts id={product.id} />
-          </Suspense>
         </div>
       </div>
     </>

app/[locale]/products/page.tsx

@@ -6,10 +6,6 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -45,9 +41,7 @@ export default async function ProductPage({
         <ProductGrid lang={locale} />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/shop-list/layout.tsx

@@ -1,7 +1,3 @@
-import { Suspense } from 'react';
-
-export const revalidate = 300; // 5 minutes in seconds
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return <Suspense>{children}</Suspense>;
+  return <>{children}</>;
 }

app/[locale]/shop-list/opengraph-image.tsx

@@ -1,9 +1,6 @@
 import OpengraphImage from 'components/opengraph-image';
 import { getPage } from 'lib/shopify';
 
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
 export default async function Image({ params }: { params: { page: string } }) {
   const page = await getPage({ handle: params.page });
   const title = page.seo?.title || page.title;

app/[locale]/shop-list/page.tsx

@@ -8,11 +8,8 @@ import { getCart, getPage, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
 import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
 import ShopsNav from './shops-nav';
 
-export const revalidate = 300; // 5 minutes in seconds
-
 export async function generateMetadata({
   params
 }: {
@@ -61,9 +58,7 @@ export default async function Page({ params }: { params: { locale?: SupportedLoc
         <Prose html={page.body as string} />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/stories/[handle]/layout.tsx

@@ -5,10 +5,7 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -43,9 +40,7 @@ export default async function BlogLayout({
     <div>
       <Navbar cart={cart} locale={locale} compact promotedItem={promotedItem} />
       {children}
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/stories/[handle]/page.tsx

@@ -8,9 +8,6 @@ import { getBlogArticle } from 'lib/shopify';
 import { BlogArticle } from 'lib/shopify/types';
 import Image from 'next/image';
 
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
 export async function generateMetadata({
   params
 }: {

app/[locale]/stories/page.tsx

@@ -7,10 +7,6 @@ import { BLOG_HANDLE } from 'lib/constants';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
 
 const { SITE_NAME } = process.env;
 
@@ -46,9 +42,7 @@ export default async function StoriesPage({
         <StoriesDetail handle={BLOG_HANDLE} locale={locale} />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/[locale]/terms/page.tsx

@@ -5,12 +5,8 @@ import Navbar from 'components/layout/navbar';
 import { getCart, getProduct } from 'lib/shopify';
 import { Product } from 'lib/shopify/types';
 import { cookies } from 'next/headers';
-import { Suspense } from 'react';
 import TermsOfUse from './terms-of-use';
 
-export const runtime = 'edge';
-export const revalidate = 43200; // 12 hours in seconds
-
 const { SITE_NAME } = process.env;
 
 export const metadata = {
@@ -45,9 +41,7 @@ export default async function TermsPage({
         <TermsOfUse />
       </div>
 
-      <Suspense>
+      <Footer cart={cart} />
-        <Footer cart={cart} />
-      </Suspense>
     </div>
   );
 }

app/layout.tsx

@@ -1,15 +1,17 @@
-import Navbar from 'components/layout/navbar';
+import { Lato, Noto_Serif_JP } from 'next/font/google';
-import { GeistSans } from 'geist/font/sans';
+import localFont from 'next/font/local';
-import { ensureStartsWith } from 'lib/utils';
 import { ReactNode } from 'react';
+
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+import { NextIntlClientProvider } from 'next-intl';
+import { notFound } from 'next/navigation';
+import Analytics from './[locale]/analytics';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
 const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
   ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
   : 'http://localhost:3000';
-const twitterCreator = TWITTER_CREATOR ? ensureStartsWith(TWITTER_CREATOR, '@') : undefined;
-const twitterSite = TWITTER_SITE ? ensureStartsWith(TWITTER_SITE, 'https://') : undefined;
 
 export const metadata = {
   metadataBase: new URL(baseUrl),
@@ -21,22 +23,81 @@ export const metadata = {
     follow: true,
     index: true
   },
-  ...(twitterCreator &&
+  ...(TWITTER_CREATOR &&
-    twitterSite && {
+    TWITTER_SITE && {
       twitter: {
         card: 'summary_large_image',
-        creator: twitterCreator,
+        creator: TWITTER_CREATOR,
-        site: twitterSite
+        site: TWITTER_SITE
       }
     })
 };
 
-export default async function RootLayout({ children }: { children: ReactNode }) {
+// Font files can be colocated inside of `app`
+const cinzel = localFont({
+  src: '../fonts/Cinzel-Regular.ttf',
+  display: 'swap',
+  variable: '--font-cinzel'
+});
+
+const alpina = localFont({
+  src: [
+    {
+      path: '../fonts/GT-Alpina-Regular-Trial.woff2',
+      weight: '400',
+      style: 'normal'
+    },
+    {
+      path: '../fonts/GT-Alpina-Bold-Trial.woff2',
+      weight: '700',
+      style: 'normal'
+    }
+  ],
+  variable: '--font-alpina'
+});
+
+const lato = Lato({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['300'],
+  variable: '--font-lato'
+});
+
+const noto = Noto_Serif_JP({
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['200', '400', '600'],
+  variable: '--font-noto'
+});
+
+export function generateStaticParams() {
+  return [{ locale: 'ja' }, { locale: 'en' }];
+}
+
+export default async function RootLayout({
+  children,
+  params
+}: {
+  children: ReactNode;
+  params: { locale?: SupportedLocale };
+}) {
+  let messages;
+  try {
+    messages = (await import(`../../messages/${params?.locale}.json`)).default;
+  } catch (error) {
+    notFound();
+  }
+
   return (
-    <html lang="en" className={GeistSans.variable}>
+    <html
-      <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">
+      lang={params.locale}
-        <Navbar />
+      className={`${cinzel.variable} ${alpina.variable} ${noto.variable} ${lato.variable}`}
-        <main>{children}</main>
+    >
+      <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
+        <NextIntlClientProvider locale={params?.locale} messages={messages}>
+          <Analytics />
+          <main>{children}</main>
+        </NextIntlClientProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -1,20 +0,0 @@
-import { Carousel } from 'components/carousel';
-import { ThreeItemGrid } from 'components/grid/three-items';
-import Footer from 'components/layout/footer';
-
-export const metadata = {
-  description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
-  openGraph: {
-    type: 'website'
-  }
-};
-
-export default async function HomePage() {
-  return (
-    <>
-      <ThreeItemGrid />
-      <Carousel />
-      <Footer />
-    </>
-  );
-}

app/product/[handle]/page.tsx

@@ -1,138 +0,0 @@
-import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-import { GridTileImage } from 'components/grid/tile';
-import Footer from 'components/layout/footer';
-import { Gallery } from 'components/product/gallery';
-import { ProductDescription } from 'components/product/product-description';
-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 async function generateMetadata({
-  params
-}: {
-  params: { handle: string };
-}): Promise<Metadata> {
-  const product = await getProduct(params.handle);
-
-  if (!product) return notFound();
-
-  const { url, width, height, altText: alt } = product.featuredImage || {};
-  const indexable = !product.tags.includes(HIDDEN_PRODUCT_TAG);
-
-  return {
-    title: product.seo.title || product.title,
-    description: product.seo.description || product.description,
-    robots: {
-      index: indexable,
-      follow: indexable,
-      googleBot: {
-        index: indexable,
-        follow: indexable
-      }
-    },
-    openGraph: url
-      ? {
-          images: [
-            {
-              url,
-              width,
-              height,
-              alt
-            }
-          ]
-        }
-      : null
-  };
-}
-
-export default async function ProductPage({ params }: { params: { handle: string } }) {
-  const product = await getProduct(params.handle);
-
-  if (!product) return notFound();
-
-  const productJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.title,
-    description: product.description,
-    image: product.featuredImage.url,
-    offers: {
-      '@type': 'AggregateOffer',
-      availability: product.availableForSale
-        ? 'https://schema.org/InStock'
-        : 'https://schema.org/OutOfStock',
-      priceCurrency: product.priceRange.minVariantPrice.currencyCode,
-      highPrice: product.priceRange.maxVariantPrice.amount,
-      lowPrice: product.priceRange.minVariantPrice.amount
-    }
-  };
-
-  return (
-    <>
-      <script
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify(productJsonLd)
-        }}
-      />
-      <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="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="h-full w-full basis-full lg:basis-4/6">
-            <Suspense fallback={null}>
-              <Gallery
-                images={product.images.map((image: Image) => ({
-                  src: image.url,
-                  altText: image.altText
-                }))}
-              />
-            </Suspense>
-          </div>
-
-          <div className="basis-full lg:basis-2/6">
-            <ProductDescription product={product} />
-          </div>
-        </div>
-        <RelatedProducts id={product.id} />
-      </div>
-      <Footer />
-    </>
-  );
-}
-
-async function RelatedProducts({ id }: { id: string }) {
-  const relatedProducts = await getProductRecommendations(id);
-
-  if (!relatedProducts.length) return null;
-
-  return (
-    <div className="py-8">
-      <h2 className="mb-4 text-2xl font-bold">Related Products</h2>
-      <ul className="flex w-full gap-4 overflow-x-auto pt-1">
-        {relatedProducts.map((product) => (
-          <li
-            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}`}>
-              <GridTileImage
-                alt={product.title}
-                label={{
-                  title: product.title,
-                  amount: product.priceRange.maxVariantPrice.amount,
-                  currencyCode: product.priceRange.maxVariantPrice.currencyCode
-                }}
-                src={product.featuredImage?.url}
-                fill
-                sizes="(min-width: 1024px) 20vw, (min-width: 768px) 25vw, (min-width: 640px) 33vw, (min-width: 475px) 50vw, 100vw"
-              />
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

components/grid/homepage-products.tsx

@@ -8,9 +8,6 @@ import Link from 'next/link';
 import Label from '../label';
 import { GridTileImage } from './tile';
 
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
 function HomepageProductsItem({ item, priority }: { item: Product; priority?: boolean }) {
   const size = item?.variants?.[0]?.selectedOptions?.find((option) => option.name === 'Size');
   const image = item?.variants?.[0]?.image;

components/layout/menu/modal.tsx

@@ -7,7 +7,7 @@ import Logo from 'components/icons/logo';
 import MenuIcon from 'components/icons/menu';
 import { useLocale, useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { Fragment, useRef, useState } from 'react';
+import { Fragment, Suspense, useRef, useState } from 'react';
 import { LanguageControl, SupportedLocale } from '../navbar/language-control';
 
 export function MenuModal({ scrolled }: { scrolled: boolean }) {
@@ -72,55 +72,56 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
                     </button>
                   </div>
 
-                  <div className="grid h-[calc(100vh-124px)] grid-cols-1 place-content-center">
+                  <Suspense fallback={null}>
-                    <div className="flex flex-row justify-end">
+                    <div className="grid h-[calc(100vh-124px)] grid-cols-1 place-content-center">
-                      <nav className="flex flex-col space-y-4 px-4 text-right">
+                      <div className="flex flex-row justify-end">
-                        <div>
+                        <nav className="flex flex-col space-y-4 px-4 text-right">
-                          <Link
+                          <div>
-                            href="/products"
+                            <Link
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              href="/products"
-                          >
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                            {t('menu.products')}
+                            >
-                          </Link>
+                              {t('menu.products')}
-                        </div>
+                            </Link>
+                          </div>
 
-                        <div>
+                          <div>
-                          <Link
+                            <Link
-                            href="/shop-list"
+                              href="/shop-list"
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('menu.shops')}
+                              {t('menu.shops')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
 
-                        <div>
+                          <div>
-                          <Link
+                            <Link
-                            href="/about"
+                              href="/about"
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('menu.about')}
+                              {t('menu.about')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
 
-                        <div>
+                          <div>
-                          <Link
+                            <Link
-                            href="/bar"
+                              href="/bar"
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('menu.bar')}
+                              {t('menu.bar')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
 
-                        <div>
+                          <div>
-                          <Link
+                            <Link
-                            href="/concept"
+                              href="/concept"
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('menu.concept')}
+                              {t('menu.concept')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
 
-                        {/* <div>
+                          {/* <div>
                           <Link
                             href="/stories"
                             className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
@@ -129,26 +130,27 @@ export function MenuModal({ scrolled }: { scrolled: boolean }) {
                           </Link>
                         </div> */}
 
-                        <div>
+                          <div>
-                          <Link
+                            <Link
-                            href="/company"
+                              href="/company"
-                            className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-4xl font-normal transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('menu.company')}
+                              {t('menu.company')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
 
-                        <div className="pt-12">
+                          <div className="pt-12">
-                          <Link
+                            <Link
-                            href={`mailto:${t('email-address.support')}`}
+                              href={`mailto:${t('email-address.support')}`}
-                            className="font-serif text-2xl font-extralight transition-opacity duration-150 hover:opacity-50"
+                              className="font-serif text-2xl font-extralight transition-opacity duration-150 hover:opacity-50"
-                          >
+                            >
-                            {t('email-address.support')}
+                              {t('email-address.support')}
-                          </Link>
+                            </Link>
-                        </div>
+                          </div>
-                      </nav>
+                        </nav>
+                      </div>
                     </div>
-                  </div>
+                  </Suspense>
                 </div>
               </Dialog.Panel>
             </div>

components/layout/navbar/index.tsx

@@ -7,6 +7,7 @@ import CartModal from 'components/cart/modal';
 import LogoNamemark from 'components/icons/namemark';
 import { Cart, Product } from 'lib/shopify/types';
 import Link from 'next/link';
+import { Suspense } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { MenuModal } from '../menu/modal';
 import { LanguageControl, SupportedLocale } from './language-control';
@@ -84,13 +85,15 @@ export default function Navbar({
           </Link>
         </div>
         <nav className="flex flex-row items-center space-x-4 px-2 md:pt-6">
-          <div className="hidden md:block">
+          <Suspense fallback={null}>
-            <LanguageControl lang={locale} />
+            <div className="hidden md:block">
-          </div>
+              <LanguageControl lang={locale} />
-          <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6 md:space-y-0">
+            </div>
-            <CartModal cart={cart} promotedItem={promotedItem} />
+            <div className="flex flex-col-reverse items-center justify-center space-y-2 rounded md:flex-row md:space-x-6 md:space-y-0">
-            <MenuModal scrolled={!inView} />
+              <CartModal cart={cart} promotedItem={promotedItem} />
-          </div>
+              <MenuModal scrolled={!inView} />
+            </div>
+          </Suspense>
         </nav>
       </div>
     </div>

deprecated/[page]/layout.tsx

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

deprecated/[page]/opengraph-image.tsx

@@ -1,12 +0,0 @@
-import OpengraphImage from 'components/opengraph-image';
-import { getPage } from 'lib/shopify';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
-export default async function Image({ params }: { params: { page: string } }) {
-  const page = await getPage({ handle: params.page });
-  const title = page.seo?.title || page.title;
-
-  return await OpengraphImage({ title });
-}

deprecated/[page]/page.tsx

@@ -1,50 +0,0 @@
-import type { Metadata } from 'next';
-
-import { SupportedLocale } from 'components/layout/navbar/language-control';
-import Prose from 'components/prose';
-import { getPage } from 'lib/shopify';
-import { notFound } from 'next/navigation';
-
-export async function generateMetadata({
-  params
-}: {
-  params: { page: string; locale?: SupportedLocale };
-}): Promise<Metadata> {
-  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
-
-  if (!page) return notFound();
-
-  return {
-    title: page.seo?.title || page.title,
-    description: page.seo?.description || page.bodySummary,
-    openGraph: {
-      publishedTime: page.createdAt,
-      modifiedTime: page.updatedAt,
-      type: 'article'
-    }
-  };
-}
-
-export default async function Page({
-  params
-}: {
-  params: { page: string; locale?: SupportedLocale };
-}) {
-  const page = await getPage({ handle: params.page, language: params?.locale?.toUpperCase() });
-
-  if (!page) return notFound();
-
-  return (
-    <div className="text-white">
-      <h1 className="mb-8 text-5xl font-bold">{page.title}</h1>
-      <Prose className="mb-8" html={page.body as string} />
-      <p className="text-sm italic">
-        {`This document was last updated on ${new Intl.DateTimeFormat(undefined, {
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric'
-        }).format(new Date(page.updatedAt))}.`}
-      </p>
-    </div>
-  );
-}

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

@@ -1,12 +0,0 @@
-import OpengraphImage from 'components/opengraph-image';
-import { getCollection } from 'lib/shopify';
-
-export const runtime = 'edge';
-export const revalidate = 300; // 5 minutes in seconds
-
-export default async function Image({ params }: { params: { collection: string } }) {
-  const collection = await getCollection({ handle: params.collection });
-  const title = collection?.seo?.title || collection?.title;
-
-  return await OpengraphImage({ title });
-}

deprecated/search/[collection]/page.tsx

@@ -1,47 +0,0 @@
-import { getCollection, getCollectionProducts } from 'lib/shopify';
-import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-
-import Grid from 'components/grid';
-import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
-
-export async function generateMetadata({
-  params
-}: {
-  params: { collection: string };
-}): Promise<Metadata> {
-  const collection = await getCollection({ handle: params.collection });
-
-  if (!collection) return notFound();
-
-  return {
-    title: collection.seo?.title || collection.title,
-    description:
-      collection.seo?.description || collection.description || `${collection.title} products`
-  };
-}
-
-export default async function CategoryPage({
-  params,
-  searchParams
-}: {
-  params: { collection: string };
-  searchParams?: { [key: string]: string | string[] | undefined };
-}) {
-  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 });
-
-  return (
-    <section>
-      {products.length === 0 ? (
-        <p className="py-3 text-lg">{`No products found in this collection`}</p>
-      ) : (
-        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-          <ProductGridItems products={products} />
-        </Grid>
-      )}
-    </section>
-  );
-}

deprecated/search/layout.tsx

@@ -1,21 +0,0 @@
-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';
-
-export default function SearchLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <div className="mx-auto flex max-w-screen-xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
-        <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-none flex-none md:order-last md:w-[125px]">
-          <FilterList list={sorting} title="Sort by" />
-        </div>
-      </div>
-      <Footer />
-    </>
-  );
-}

deprecated/search/loading.tsx

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

deprecated/search/page.tsx

@@ -1,39 +0,0 @@
-import Grid from 'components/grid';
-import ProductGridItems from 'components/layout/product-grid-items';
-import { defaultSort, sorting } from 'lib/constants';
-import { getProducts } from 'lib/shopify';
-
-export const metadata = {
-  title: 'Search',
-  description: 'Search for products in the store.'
-};
-
-export default async function SearchPage({
-  searchParams
-}: {
-  searchParams?: { [key: string]: string | string[] | undefined };
-}) {
-  const { sort, q: searchValue } = searchParams as { [key: string]: string };
-  const { sortKey, reverse } = sorting.find((item) => item.slug === sort) || defaultSort;
-
-  const products = await getProducts({ sortKey, reverse, query: searchValue });
-  const resultsText = products.length > 1 ? 'results' : 'result';
-
-  return (
-    <>
-      {searchValue ? (
-        <p className="mb-4">
-          {products.length === 0
-            ? 'There are no products that match '
-            : `Showing ${products.length} ${resultsText} for `}
-          <span className="font-bold">&quot;{searchValue}&quot;</span>
-        </p>
-      ) : null}
-      {products.length > 0 ? (
-        <Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-          <ProductGridItems products={products} />
-        </Grid>
-      ) : null}
-    </>
-  );
-}

deprecated/sitemap.ts

@@ -1,52 +0,0 @@
-import { getCollections, getPages, getProducts } from 'lib/shopify';
-import { validateEnvironmentVariables } from 'lib/utils';
-import { MetadataRoute } from 'next';
-
-type Route = {
-  url: string;
-  lastModified: string;
-};
-
-const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
-  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
-  : 'http://localhost:3000';
-
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  validateEnvironmentVariables();
-
-  const routesMap = [''].map((route) => ({
-    url: `${baseUrl}${route}`,
-    lastModified: new Date().toISOString()
-  }));
-
-  const collectionsPromise = getCollections().then((collections) =>
-    collections.map((collection) => ({
-      url: `${baseUrl}${collection.path}`,
-      lastModified: collection.updatedAt
-    }))
-  );
-
-  const productsPromise = getProducts({}).then((products) =>
-    products.map((product) => ({
-      url: `${baseUrl}/product/${product.handle}`,
-      lastModified: product.updatedAt
-    }))
-  );
-
-  const pagesPromise = getPages({}).then((pages) =>
-    pages.map((page) => ({
-      url: `${baseUrl}/${page.handle}`,
-      lastModified: page.updatedAt
-    }))
-  );
-
-  let fetchedRoutes: Route[] = [];
-
-  try {
-    fetchedRoutes = (await Promise.all([collectionsPromise, productsPromise, pagesPromise])).flat();
-  } catch (error) {
-    throw JSON.stringify(error, null, 2);
-  }
-
-  return [...routesMap, ...fetchedRoutes];
-}

lib/shopify/index.ts

@@ -400,6 +400,7 @@ export async function getPage({
 }): Promise<Page> {
   const res = await shopifyFetch<ShopifyPageOperation>({
     query: getPageQuery,
+    cache: 'no-store',
     variables: { handle, language, country }
   });
 
@@ -415,6 +416,7 @@ export async function getPages({
 }): Promise<Page[]> {
   const res = await shopifyFetch<ShopifyPagesOperation>({
     query: getPagesQuery,
+    cache: 'no-store',
     variables: { language, country }
   });
 

yarn.lock

@@ -183,15 +183,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@headlessui/react@npm:^1.7.15":
+"@headlessui/react@npm:^1.7.17":
-  version: 1.7.16
+  version: 1.7.17
-  resolution: "@headlessui/react@npm:1.7.16"
+  resolution: "@headlessui/react@npm:1.7.17"
   dependencies:
     client-only: ^0.0.1
   peerDependencies:
     react: ^16 || ^17 || ^18
     react-dom: ^16 || ^17 || ^18
-  checksum: 85844c96c79796236fa7dec2f1c2f0332d7554d9b785d7b37d9762bb4133088a0cf1334653d6f91c1fe4619960eb569f14ba5f6a962c3305e03f7b362acbabbe
+  checksum: 0cdb67747e7f606f78214dac0b48573247779e70534b4471515c094b74addda173dc6a9847d33aea9c6e6bc151016c034125328953077e32aa7947ebabed91f7
   languageName: node
   linkType: hard
 
@@ -1352,7 +1352,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "commerce@workspace:."
   dependencies:
-    "@headlessui/react": ^1.7.15
+    "@headlessui/react": ^1.7.17
     "@heroicons/react": ^2.0.18
     "@tailwindcss/container-queries": ^0.1.1
     "@tailwindcss/typography": ^0.5.9