vercel · leerob · Apr 18, 2024 · Nov 8, 2023 · Nov 8, 2023 · Nov 10, 2023
diff --git a/.vscode/settings.json b/.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"
  }
 }
diff --git a/app/[page]/layout.tsx b/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>
+ </>
  );
 }
diff --git a/app/[page]/page.tsx b/app/[page]/page.tsx
@@ -4,10 +4,6 @@ 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
 }: {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,7 +1,7 @@
 import Navbar from 'components/layout/navbar';
-import { GeistSans } from 'geist/font';
+import { GeistSans } from 'geist/font/sans';
 import { ensureStartsWith } from 'lib/utils';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
 import './globals.css';
 
 const { TWITTER_CREATOR, TWITTER_SITE, SITE_NAME } = process.env;
@@ -36,9 +36,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
  <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>
+ <main>{children}</main>
  </body>
  </html>
  );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,9 +1,6 @@
 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.',
@@ -16,12 +13,8 @@ export default async function HomePage() {
  return (
  <>
  <ThreeItemGrid />
- <Suspense>
- <Carousel />
- <Suspense>
- <Footer />
- </Suspense>
- </Suspense>
+ <Carousel />
+ <Footer />
  </>
  );
 }
diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
@@ -1,6 +1,5 @@
 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';
@@ -10,8 +9,7 @@ import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
 import { Image } from 'lib/shopify/types';
 import Link from 'next/link';
-
-export const runtime = 'edge';
+import { Suspense } from 'react';
 
 export async function generateMetadata({
  params
@@ -84,25 +82,27 @@ export default async function ProductPage({ params }: { params: { handle: string
  <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">
- <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.map((image: Image) => ({
+ src: image.url,
+ altText: image.altText
+ }))}
+ />
+ </Suspense>
  </div>
 
  <div className="basis-full lg:basis-2/6">
  <ProductDescription product={product} />
  </div>
  </div>
- <Suspense>
- <RelatedProducts id={product.id} />
- </Suspense>
+ <RelatedProducts id={product.id} />
  </div>
- <Suspense>
- <Footer />
- </Suspense>
+ <Footer />
  </>
  );
 }

diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
@@ -6,8 +6,6 @@ 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
 }: {

diff --git a/app/search/layout.tsx b/app/search/layout.tsx
@@ -2,11 +2,10 @@ 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 { Suspense } from 'react';
 
 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="order-first w-full flex-none md:max-w-[125px]">
  <Collections />
@@ -17,6 +16,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
  </div>
  </div>
  <Footer />
- </Suspense>
+ </>
  );
 }
diff --git a/app/search/page.tsx b/app/search/page.tsx
@@ -3,8 +3,6 @@ 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.'

diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
@@ -6,7 +6,7 @@ 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() {
@@ -15,7 +15,9 @@ export default async function Navbar() {
  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">
@@ -41,7 +43,9 @@ 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 />}>

diff --git a/components/layout/navbar/mobile-menu.tsx b/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();
@@ -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">

diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
@@ -41,3 +41,17 @@ export default function Search() {
  </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">
+ <MagnifyingGlassIcon className="h-4" />
+ </div>
+ </form>
+ );
+}
diff --git a/components/layout/search/filter/index.tsx b/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';
 
@@ -25,10 +26,14 @@ export default function FilterList({ list, title }: { list: ListItem[]; 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>
  </>

diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
@@ -2,6 +2,7 @@ import { AddToCart } from 'components/cart/add-to-cart';
 import Price from 'components/price';
 import Prose from 'components/prose';
 import { Product } from 'lib/shopify/types';
+import { Suspense } from 'react';
 import { VariantSelector } from './variant-selector';
 
 export function ProductDescription({ product }: { product: Product }) {
@@ -16,7 +17,9 @@ export function ProductDescription({ product }: { product: Product }) {
  />
  </div>
  </div>
- <VariantSelector options={product.options} variants={product.variants} />
+ <Suspense fallback={null}>
+ <VariantSelector options={product.options} variants={product.variants} />
+ </Suspense>
 
  {product.descriptionHtml ? (
  <Prose
@@ -25,7 +28,9 @@ export function ProductDescription({ product }: { product: Product }) {
  />
  ) : null}
 
- <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+ <Suspense fallback={null}>
+ <AddToCart variants={product.variants} availableForSale={product.availableForSale} />
+ </Suspense>
  </>
  );
 }
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
@@ -357,6 +357,7 @@ export async function getMenu(handle: string): Promise<Menu[]> {
 export async function getPage(handle: string): Promise<Page> {
  const res = await shopifyFetch<ShopifyPageOperation>({
  query: getPageQuery,
+ cache: 'no-store',
  variables: { handle }
  });
 
@@ -365,7 +366,8 @@ export async function getPage(handle: string): Promise<Page> {
 
 export async function getPages(): Promise<Page[]> {
  const res = await shopifyFetch<ShopifyPagesOperation>({
- query: getPagesQuery
+ query: getPagesQuery,
+ cache: 'no-store'
  });
 
  return removeEdgesAndNodes(res.body.data.pages);

diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,9 @@ module.exports = {
  // Disabling on production builds because we're running checks on PRs via GitHub Actions.
  ignoreDuringBuilds: true
  },
+ experimental: {
+ ppr: true
+ },
  images: {
  formats: ['image/avif', 'image/webp'],
  remotePatterns: [

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
  "pnpm": ">=7"
  },
  "scripts": {
- "dev": "next dev",
+ "dev": "next dev --turbo",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
@@ -23,30 +23,30 @@
  },
  "dependencies": {
  "@headlessui/react": "^1.7.17",
- "@heroicons/react": "^2.0.18",
+ "@heroicons/react": "^2.1.1",
  "clsx": "^2.0.0",
- "geist": "^1.0.0",
- "next": "14.0.0",
+ "geist": "^1.2.0",
+ "next": "14.0.5-canary.23",
  "react": "18.2.0",
  "react-dom": "18.2.0"
  },
  "devDependencies": {
  "@tailwindcss/container-queries": "^0.1.1",
  "@tailwindcss/typography": "^0.5.10",
- "@types/node": "20.8.9",
- "@types/react": "18.2.33",
- "@types/react-dom": "18.2.14",
+ "@types/node": "20.10.5",
+ "@types/react": "18.2.45",
+ "@types/react-dom": "18.2.18",
  "@vercel/git-hooks": "^1.0.0",
  "autoprefixer": "^10.4.16",
- "eslint": "^8.52.0",
- "eslint-config-next": "^14.0.0",
- "eslint-config-prettier": "^9.0.0",
- "eslint-plugin-unicorn": "^48.0.1",
- "lint-staged": "^15.0.2",
- "postcss": "^8.4.31",
- "prettier": "3.0.3",
- "prettier-plugin-tailwindcss": "^0.5.6",
- "tailwindcss": "^3.3.5",
- "typescript": "5.2.2"
+ "eslint": "^8.56.0",
+ "eslint-config-next": "^14.0.4",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-unicorn": "^50.0.1",
+ "lint-staged": "^15.2.0",
+ "postcss": "^8.4.32",
+ "prettier": "3.1.1",
+ "prettier-plugin-tailwindcss": "^0.5.9",
+ "tailwindcss": "^3.4.0",
+ "typescript": "5.3.3"
  }
 }