create-nymbal-app 0.3.0 → 0.5.0

package/scaffold/templates/nextjs/components/server/Header.tsx

@@ -1,102 +1,38 @@
-import Link from 'next/link'
-import { SearchBarWrapper } from '@/components/client/SearchBarWrapper'
-import { MiniCartWrapper } from '@/components/client/MiniCartWrapper'
-import styles from './Header.module.css'
+import { headers } from 'next/headers'
+import { SiteHeader } from '@/components/client/elements'
+import { fetchCart } from '@/lib/api'
+import { HEADER } from '@/lib/chrome'
+import { canSearch, siteHeader } from '@/lib/header'
+import { renderNymbal } from '@/lib/render'
 
-const NAV_LINKS = [
-  { href: '/products', label: 'Shop' },
-  { href: '/products?category=new', label: 'New Arrivals' },
-  { href: '/products?category=sale', label: 'Sale' },
-]
-
-export function Header() {
+function HeaderElement({ header }: { header: ReturnType<typeof siteHeader> }) {
+  const serverHtml = renderNymbal('nymbal-site-header', header.attributes, header.children).__html
   return (
-    <header className={styles.header} data-testid="site-header">
-      <div className={`container ${styles.inner}`}>
-        <Link href="/" className={styles.logo}>
-          Nymbal
-        </Link>
-
-        <nav className={styles.nav} aria-label="Main navigation">
-          <ul className={styles.navList}>
-            {NAV_LINKS.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className={styles.navLink}>
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </nav>
-
-        <div className={styles.actions}>
-          <div className={styles.search}>
-            <SearchBarWrapper />
-          </div>
-          <Link href="/account" className={styles.iconLink} aria-label="Account">
-            <svg
-              width="20"
-              height="20"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-              <circle cx="12" cy="7" r="4" />
-            </svg>
-          </Link>
-          <MiniCartWrapper />
-        </div>
+    <SiteHeader
+      links={HEADER.links}
+      logo={HEADER.logo}
+      accountHref={HEADER.accountHref}
+      serverHtml={serverHtml}
+    />
+  )
+}
 
-        <input
-          type="checkbox"
-          id="mobile-menu-toggle"
-          className={styles.menuCheckbox}
-          aria-hidden="true"
-        />
-        <label
-          htmlFor="mobile-menu-toggle"
-          className={styles.menuButton}
-          aria-label="Toggle menu"
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <line x1="3" y1="6" x2="21" y2="6" />
-            <line x1="3" y1="12" x2="21" y2="12" />
-            <line x1="3" y1="18" x2="21" y2="18" />
-          </svg>
-        </label>
+/**
+ * The header of a page. `shopper` reads the request's cart cookie, so the count is in the HTML with JavaScript off and
+ * the page renders per request; without it the page may be cached for every shopper, and the mini-cart fills its count
+ * in the browser.
+ */
+export async function Header({ shopper = false }: { shopper?: boolean }) {
+  const cookie = shopper ? (await headers()).get('cookie') : null
+  const [search, cart] = await Promise.all([canSearch(), shopper ? fetchCart(cookie) : null])
+  return <HeaderElement header={siteHeader(search, cart?.itemCount)} />
+}
 
-        <nav className={styles.mobileNav} aria-label="Mobile navigation">
-          <ul className={styles.mobileNavList}>
-            {NAV_LINKS.map((link) => (
-              <li key={link.href}>
-                <Link href={link.href} className={styles.mobileNavLink}>
-                  {link.label}
-                </Link>
-              </li>
-            ))}
-            <li>
-              <Link href="/account" className={styles.mobileNavLink}>
-                Account
-              </Link>
-            </li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-  )
+/**
+ * The header with no search bar and no count, for the root 404: Next renders that 404 into every page under the root
+ * layout and at build, so it can neither read the request (a cached page would fail) nor call the API (a build with
+ * the API down would fail).
+ */
+export function PlainHeader() {
+  return <HeaderElement header={siteHeader(false)} />
 }

package/scaffold/templates/nextjs/components/server/NotFoundView.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link'
+import styles from '@/styles/pages/error.module.css'
+
+/** The 404's message and its ways back, under whichever header the 404 has. */
+export function NotFoundView() {
+  return (
+    <div className={styles.page}>
+      <div className={styles.wrapper}>
+        <div className={`${styles.icon} ${styles.notFoundIcon}`}>
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+        </div>
+        <p className={styles.statusCode}>404</p>
+        <h1 className={styles.title}>Page Not Found</h1>
+        <p className={styles.message}>
+          The page you are looking for does not exist or may have been moved.
+        </p>
+        <div className={styles.actions}>
+          <Link href="/" className={styles.homeLink}>
+            Go Home
+          </Link>
+          <Link href="/products" className={styles.retryButton}>
+            Browse Products
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/scaffold/templates/nextjs/components/server/SkipNav.tsx

@@ -1,7 +1,11 @@
+// In a landmark of its own: the header's links are in its shadow root, where a checker cannot tell the skip link
+// comes before them, so it would count it as content outside every landmark.
 export function SkipNav() {
   return (
-    <a href="#main" className="skip-nav">
-      Skip to content
-    </a>
+    <nav aria-label="Skip link">
+      <a href="#main" className="skip-nav">
+        Skip to content
+      </a>
+    </nav>
   )
 }

package/scaffold/templates/nextjs/elements/index.ts

@@ -0,0 +1,12 @@
+// This store's own elements. Everything here runs before any Nymbal element is defined (components/client/
+// NymbalSetup.tsx imports it first), and Nymbal leaves alone any tag that is already defined, so an element defined
+// here under a Nymbal tag replaces Nymbal's. The server renders Nymbal's elements too, so a replacement is also named
+// in `serverElements`, and the server renders it under the tag (lib/render.ts). The module is evaluated on the server
+// as well, so define elements only in the browser, and import @nymbalhq/web-components/hydrate-support before lit,
+// so the element takes over what the server rendered:
+//
+//   import '@nymbalhq/web-components/hydrate-support'
+//   import { MyMiniCart } from './my-mini-cart'
+//   if (typeof window !== 'undefined') customElements.define('nymbal-mini-cart', MyMiniCart)
+//   export const serverElements = { 'nymbal-mini-cart': MyMiniCart }
+export const serverElements = {}

package/scaffold/templates/nextjs/lib/api.ts

@@ -1,9 +1,56 @@
-import type { DenormalisedProduct, ProductListResult, ReviewsListResult } from '@nymbalhq/sdk'
+import { cache } from 'react'
+import { unstable_rethrow } from 'next/navigation'
+import type {
+  DenormalisedProduct,
+  ProductListResult,
+  ProductSearchResult,
+  ReviewsListResult,
+} from '@nymbalhq/sdk'
 import { DEFAULT_PRODUCT_SORT, PRODUCT_SORT_KEYS } from '@nymbalhq/types'
-import type { Category, Order, ProductSortKey } from '@nymbalhq/types'
+import type { Cart, Category, Order, ProductSortKey, StoreCapabilities } from '@nymbalhq/types'
 
 const API_URL = process.env.NYMBAL_API_URL ?? 'http://localhost:3001'
 
+/**
+ * Seconds a catalog read stays in Next's data cache: each is at least the TTL of the longest route that reads it, since
+ * a route's TTL is the smallest of its segment's and its fetches'. NYMBAL_CATALOG_REVALIDATE_S replaces every one.
+ */
+const CATALOG_REVALIDATE_S = {
+  capabilities: 3600,
+  categories: 21600,
+  product: 300,
+  products: 300,
+  reviews: 60,
+} as const
+
+function revalidateOf(read: keyof typeof CATALOG_REVALIDATE_S, seconds?: number): number {
+  const override = Number(process.env.NYMBAL_CATALOG_REVALIDATE_S)
+  if (Number.isInteger(override) && override > 0) return override
+  return seconds ?? CATALOG_REVALIDATE_S[read]
+}
+
+/**
+ * A catalog read through Next's data cache. It resolves a 200 or a 404 (an answer about the data, which the caller
+ * reads); a network error, a 5xx or any other refusal (a rate limit's 429) rejects, so a failed first render is an
+ * error Next does not cache and a failed regeneration keeps the last good page, where an empty value would be cached
+ * for every shopper. `next dev` caches no page but still keeps fetches, so there the read is fresh and a catalog edit
+ * shows at once.
+ */
+async function catalogFetch(
+  url: string,
+  read: keyof typeof CATALOG_REVALIDATE_S,
+  seconds?: number,
+): Promise<Response> {
+  const res = await fetch(
+    url,
+    process.env.NODE_ENV === 'development'
+      ? { cache: 'no-store' }
+      : { next: { revalidate: revalidateOf(read, seconds) } },
+  )
+  if (!res.ok && res.status !== 404) throw new Error(`[api] GET ${url} answered ${res.status}`)
+  return res
+}
+
 export async function fetchProducts(params?: {
   limit?: number
   cursor?: string
@@ -16,74 +63,143 @@ export async function fetchProducts(params?: {
   if (params?.category) url.searchParams.set('category', params.category)
   if (params?.sort) url.searchParams.set('sort', params.sort)
 
-  try {
-    const res = await fetch(url.toString(), { cache: 'no-store' })
-    if (!res.ok) return { items: [], nextCursor: null }
-    const envelope = (await res.json()) as { data: ProductListResult }
-    return envelope.data ?? { items: [], nextCursor: null }
-  } catch (err) {
-    console.error('[api] fetchProducts failed', err)
-    return { items: [], nextCursor: null }
-  }
+  const res = await catalogFetch(url.toString(), 'products')
+  if (!res.ok) return { items: [], nextCursor: null }
+  const envelope = (await res.json()) as { data: ProductListResult }
+  return envelope.data ?? { items: [], nextCursor: null }
 }
 
-/** The sort a listing URL asks for; a missing or unknown `?sort=` is the default. */
-export function sortFromSearchParams(params: { sort?: string | string[] }): ProductSortKey {
+/** What the store can do, which decides what the page renders; null when the API has no capabilities to report. */
+export async function fetchCapabilities(): Promise<StoreCapabilities | null> {
+  const res = await catalogFetch(`${API_URL}/api/capabilities`, 'capabilities')
+  if (!res.ok) return null
+  const envelope = (await res.json()) as { data: StoreCapabilities }
+  return envelope.data ?? null
+}
+
+/** The sort a listing URL asks for, among the store's keys; a missing or unknown `?sort=` is the store's default. */
+export function sortFromSearchParams(
+  params: { sort?: string | string[] },
+  catalog?: StoreCapabilities['catalog'],
+): ProductSortKey {
   const sort = Array.isArray(params.sort) ? params.sort[0] : params.sort
-  return PRODUCT_SORT_KEYS.find((key) => key === sort) ?? DEFAULT_PRODUCT_SORT
+  const keys = catalog?.sortKeys ?? PRODUCT_SORT_KEYS
+  return keys.find((key) => key === sort) ?? catalog?.defaultSort ?? DEFAULT_PRODUCT_SORT
 }
 
-export async function fetchProduct(slug: string): Promise<DenormalisedProduct | null> {
+/**
+ * The product, or null when the API has none by that slug (a 404, the only answer that is null). `revalidateS` is the
+ * caller's route TTL when it is shorter than the default: callers share one data-cache entry, and Next judges its
+ * staleness by each caller's own seconds, so the PDP's 60 s regeneration reads stock no older than 60 s.
+ */
+export async function fetchProduct(
+  slug: string,
+  revalidateS?: number,
+): Promise<DenormalisedProduct | null> {
+  const url = `${API_URL}/api/products/${encodeURIComponent(slug)}`
+  const res = await catalogFetch(url, 'product', revalidateS)
+  if (res.status === 404) return null
+  const envelope = (await res.json()) as { data: DenormalisedProduct }
+  return envelope.data ?? null
+}
+
+/** The store's categories as the API lists them; never a list of its own, which a cached page would then show. */
+export async function fetchCategories(): Promise<Category[]> {
+  const url = `${API_URL}/api/categories`
+  const res = await catalogFetch(url, 'categories')
+  if (!res.ok) throw new Error(`[api] GET ${url} answered ${res.status}`)
+  const envelope = (await res.json()) as { data: Category[] }
+  return envelope.data
+}
+
+export async function fetchOrder(orderNumber: string): Promise<Order | null> {
   try {
-    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(slug)}`, { cache: 'no-store' })
+    const res = await fetch(`${API_URL}/api/orders/${encodeURIComponent(orderNumber)}`, {
+      cache: 'no-store',
+    })
     if (!res.ok) return null
-    const envelope = (await res.json()) as { data: DenormalisedProduct }
+    const envelope = (await res.json()) as { data: Order }
     return envelope.data ?? null
   } catch (err) {
-    console.error('[api] fetchProduct failed', err)
+    unstable_rethrow(err)
+    console.error('[api] fetchOrder failed', err)
     return null
   }
 }
 
-const SEED_CATEGORIES: Category[] = [
-  { id: 'cat_apparel', parentId: null, name: 'Apparel', slug: 'apparel', description: 'Clothing and accessories', position: 0, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_home', parentId: null, name: 'Home', slug: 'home', description: 'Home goods and decor', position: 1, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_electronics', parentId: null, name: 'Electronics', slug: 'electronics', description: 'Gadgets and devices', position: 2, createdAt: '2024-01-01T00:00:00Z' },
-  { id: 'cat_books', parentId: null, name: 'Books', slug: 'books', description: 'Books and reading', position: 3, createdAt: '2024-01-01T00:00:00Z' },
-]
+export async function fetchReviews(productId: string): Promise<ReviewsListResult> {
+  const res = await catalogFetch(
+    `${API_URL}/api/products/${encodeURIComponent(productId)}/reviews`,
+    'reviews',
+  )
+  if (!res.ok) return { items: [], nextCursor: null }
+  const envelope = (await res.json()) as { data: ReviewsListResult }
+  return envelope.data ?? { items: [], nextCursor: null }
+}
 
-export async function fetchCategories(): Promise<Category[]> {
-  try {
-    const res = await fetch(`${API_URL}/api/categories`, { cache: 'no-store' })
-    if (!res.ok) return SEED_CATEGORIES
-    const envelope = (await res.json()) as { data: Category[] }
-    return envelope.data ?? SEED_CATEGORIES
-  } catch (err) {
-    console.error('[api] fetchCategories failed', err)
-    return SEED_CATEGORIES
+/** The cart the cart elements take as their `cart` attribute: its lines and sums, never the cart token. */
+export interface CartProjection {
+  items: Cart['items']
+  subtotalMinor: number
+  currency: string
+  itemCount: number
+}
+
+const CART_COOKIE = 'nymbal.cart'
+
+/** The `nymbal.cart` value in a request's Cookie header, or null. */
+function cartToken(cookie: string | null): string | null {
+  for (const pair of (cookie ?? '').split(';')) {
+    const [name, ...value] = pair.trim().split('=')
+    if (name === CART_COOKIE && value.length > 0) return value.join('=')
   }
+  return null
 }
 
-export async function fetchOrder(orderNumber: string): Promise<Order | null> {
+/**
+ * The shopper's cart, read with the request's `nymbal.cart` cookie, as the projection the elements take; once per
+ * request, however many server components ask. Null without the cookie: `GET /api/cart` with none would make a cart
+ * the page could not keep, so the element renders its shell and the browser fills it. The cookie reaches this server
+ * when the store and the API share a host or a proxy.
+ */
+export const fetchCart = cache(async (cookie: string | null): Promise<CartProjection | null> => {
+  const token = cartToken(cookie)
+  if (token === null) return null
   try {
-    const res = await fetch(`${API_URL}/api/orders/${encodeURIComponent(orderNumber)}`, { cache: 'no-store' })
+    const res = await fetch(`${API_URL}/api/cart`, {
+      cache: 'no-store',
+      headers: { Cookie: `${CART_COOKIE}=${token}` },
+    })
     if (!res.ok) return null
-    const envelope = (await res.json()) as { data: Order }
-    return envelope.data ?? null
+    const { items, subtotalMinor, currency } = ((await res.json()) as { data: Cart }).data
+    return {
+      items,
+      subtotalMinor,
+      currency,
+      itemCount: items.reduce((n, item) => n + item.qty, 0),
+    }
   } catch (err) {
-    console.error('[api] fetchOrder failed', err)
+    unstable_rethrow(err)
+    console.error('[api] fetchCart failed', err)
     return null
   }
-}
+})
 
-export async function fetchReviews(productId: string): Promise<ReviewsListResult> {
+/** The search the search page shows for `q` (and its category), as the search store would hold it. */
+export async function fetchSearch(
+  q: string,
+  category: string | null,
+): Promise<ProductSearchResult | null> {
+  const url = new URL('/api/products/search', API_URL)
+  url.searchParams.set('q', q)
+  if (category) url.searchParams.set('category', category)
   try {
-    const res = await fetch(`${API_URL}/api/products/${encodeURIComponent(productId)}/reviews`, { cache: 'no-store' })
-    if (!res.ok) return { items: [], nextCursor: null }
-    const envelope = (await res.json()) as { data: ReviewsListResult }
-    return envelope.data ?? { items: [], nextCursor: null }
+    const res = await fetch(url.toString(), { cache: 'no-store' })
+    if (!res.ok) return null
+    return ((await res.json()) as { data: ProductSearchResult }).data ?? null
   } catch (err) {
-    console.error('[api] fetchReviews failed', err)
-    return { items: [], nextCursor: null }
+    unstable_rethrow(err)
+    console.error('[api] fetchSearch failed', err)
+    return null
   }
 }

package/scaffold/templates/nextjs/lib/chrome.ts

@@ -0,0 +1,40 @@
+// The store's header and footer, rendered by nymbal-site-header and nymbal-site-footer: edit the links here.
+
+export const HEADER = {
+  logo: 'Nymbal',
+  accountHref: '/account',
+  links: [
+    { href: '/products', label: 'Shop' },
+    { href: '/products?category=new', label: 'New Arrivals' },
+    { href: '/products?category=sale', label: 'Sale' },
+  ],
+}
+
+export const FOOTER_COLUMNS = [
+  {
+    heading: 'Shop',
+    links: [
+      { href: '/products', label: 'All Products' },
+      { href: '/products?category=new', label: 'New Arrivals' },
+      { href: '/products?category=sale', label: 'Sale' },
+    ],
+  },
+  {
+    heading: 'Account',
+    links: [
+      { href: '/account', label: 'My Account' },
+      { href: '/account/orders', label: 'Order History' },
+      { href: '/account/login', label: 'Sign In' },
+      { href: '/account/register', label: 'Create Account' },
+    ],
+  },
+  {
+    heading: 'About',
+    links: [
+      { href: '/about', label: 'About Us' },
+      { href: '/contact', label: 'Contact' },
+      { href: '/shipping', label: 'Shipping & Returns' },
+      { href: '/privacy', label: 'Privacy Policy' },
+    ],
+  },
+]

package/scaffold/templates/nextjs/lib/client.ts

@@ -1,5 +1,8 @@
 import { createNymbalClient, type NymbalClient } from '@nymbalhq/sdk'
 
+// A payment driver of the project's own is registered here, at module load, before any checkout renders:
+// registerPaymentDriver(name, driver) from @nymbalhq/sdk, named by the driver of the payments adapter's client half.
+
 let instance: NymbalClient | null = null
 let restoring: Promise<void> | null = null
 

package/scaffold/templates/nextjs/lib/fragments.ts

@@ -0,0 +1,16 @@
+// The fragment routes answer one element as the server renders it, the same as the pages carry, for a CDN to cache
+// and an edge to assemble. Next sets each 200's Cache-Control from the route's TTL; a fragment reads no request, so it
+// is the same for every shopper.
+
+/** A fragment's HTML. It has no <meta charset>, so the charset is in the header. */
+export function fragment(html: string): Response {
+  return new Response(html, { headers: { 'Content-Type': 'text/html; charset=utf-8' } })
+}
+
+/** No fragment by that name: Next may hold it for the route's TTL, and `no-store` keeps a CDN from storing it. */
+export function noFragment(): Response {
+  return new Response('Not found', {
+    status: 404,
+    headers: { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' },
+  })
+}

package/scaffold/templates/nextjs/lib/header.ts

@@ -0,0 +1,39 @@
+import { fetchCapabilities } from '@/lib/api'
+import { HEADER } from '@/lib/chrome'
+import { renderElement } from '@/lib/render'
+
+/**
+ * The store's nymbal-site-header as the server renders it: its attributes, and the search bar (when the store searches)
+ * and the mini-cart as its light-DOM children, each with the slot it fills. React cannot give children beside the
+ * header's server HTML, so they go in that HTML. The mini-cart has a count only on a shopper's own page; a shared,
+ * cached header has none.
+ */
+export function siteHeader(
+  search: boolean,
+  cartCount?: number,
+): { attributes: Record<string, string>; children: string } {
+  const miniCart: Record<string, string> = { slot: 'cart' }
+  if (cartCount !== undefined) miniCart['count'] = String(cartCount)
+  const children = [
+    search
+      ? renderElement('nymbal-search-bar', {
+          attributes: { slot: 'search', placeholder: 'Search products...', 'debounce-ms': '300' },
+        })
+      : '',
+    renderElement('nymbal-mini-cart', { attributes: miniCart }),
+  ].join('')
+  return {
+    attributes: {
+      links: JSON.stringify(HEADER.links),
+      logo: HEADER.logo,
+      'account-href': HEADER.accountHref,
+    },
+    children,
+  }
+}
+
+/** Whether the store searches, which puts the search bar in the header. */
+export async function canSearch(): Promise<boolean> {
+  const capabilities = await fetchCapabilities()
+  return capabilities?.search.capabilities.includes('search') ?? false
+}

package/scaffold/templates/nextjs/lib/render.ts

@@ -0,0 +1,14 @@
+import { renderNymbal } from '@nymbalhq/react/server'
+import {
+  cardImageOf,
+  cardProductOf,
+  registerServerElements,
+  renderElement,
+} from '@nymbalhq/web-components/ssr'
+import { serverElements } from '@/elements'
+
+// Server components only: this loads Lit SSR. The store's own elements render on the server under their tags, as the
+// browser defines them there.
+registerServerElements(serverElements)
+
+export { cardImageOf, cardProductOf, renderElement, renderNymbal }

package/scaffold/templates/nextjs/next.config.mjs

@@ -1,9 +1,41 @@
+import { relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// NYMBAL_ELEMENTS_ENTRY (an absolute path) is the store's elements entry in place of elements/index.ts, on the server
+// and in the browser (the E2E override fixture).
+const elementsEntry = process.env.NYMBAL_ELEMENTS_ENTRY
+const elementsAlias =
+  elementsEntry === undefined
+    ? {}
+    : { '@/elements': `./${relative(fileURLToPath(new URL('.', import.meta.url)), elementsEntry)}` }
+
+// NYMBAL_NEXT_DIST_DIR builds beside the usual `.next`, so a second build cannot overwrite one being served.
+const distDir = process.env.NYMBAL_NEXT_DIST_DIR || '.next'
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  distDir,
+  ...(distDir !== '.next' && { typescript: { tsconfigPath: 'tsconfig.dist.json' } }),
+  // Cached pages live in memory, bounded by cacheMaxMemorySize: on disk, every distinct product URL a crawler asks for
+  // would keep an entry.
+  experimental: { isrFlushToDisk: false },
+  // `/` and the header and nav fragments are dynamic segments with no params, so the build prerenders none of them
+  // (the API may be down then) and Next caches each on its first request.
+  async rewrites() {
+    return {
+      beforeFiles: [
+        { source: '/', destination: '/home/index' },
+        { source: '/fragments/header', destination: '/fragments/header/index' },
+        { source: '/fragments/nav', destination: '/fragments/nav/index' },
+      ],
+    }
+  },
   transpilePackages: ['@nymbalhq/sdk', '@nymbalhq/react', '@nymbalhq/web-components'],
   images: {
     remotePatterns: [{ protocol: 'https', hostname: '**' }],
   },
+  turbopack: { resolveAlias: elementsAlias },
 }
+
 export default nextConfig