Building Mid Engine Co with Next.js
Mid Engine Co is a custom storefront backed by Shopify. Its browser app loads public product data, manages each visitor’s cart, and sends buyers to Shopify checkout. A Next.js version could render product pages on the server while keeping the cart interactive in the browser.
A likely Next.js architecture
- Use App Router pages for products and collections. Server Components can query Shopify and produce the initial product HTML.
- Use Client Components for the cart. The cart uses the current visitor’s Shopify cart identity and updates in response to their actions.
- Send buyers to Shopify checkout. The cart flow hands off using Shopify’s checkout URL.
Next.js supports composing server-rendered components with browser-interactive components. Server and Client Components · Fetching data · Caching
Decisions the Next.js implementation needs
- Which code runs on the server and which runs in the browser. Product pages can fetch Shopify data in Server Components; cart controls need Client Components for state, events, and browser storage. Data passed across that boundary must be serializable.
- How product routes are created. Define dynamic routes such as app/products/[handle], then choose whether handles are generated at build time with generateStaticParams or rendered when first requested.
- How Shopify responses and rendered pages are cached. Set an explicit cache policy for catalog requests and pages. Decide how freshness, stale data, and upstream Shopify failures should affect a visitor’s response.
- How product changes invalidate pages. A Shopify webhook can call a protected Route Handler that uses revalidateTag or revalidatePath. The webhook, secret, and mapping from changed products to affected pages must be implemented.
- How visitor-specific cart data stays private. Keep cart operations in a Client Component, or make any server-side cart fetch session-aware and ensure it cannot enter a shared cache.
- How the server-rendered app is deployed. Choose a compatible Node.js or platform runtime and configure server-only Shopify credentials. A static export is another option, but it cannot provide request-time server rendering.
- How much of the current storefront is rebuilt. Mid Engine Co’s existing browser app and components would need to be moved into the React and Next.js structure, with behavior tested again across product, cart, and checkout flows.
Technical considerations
Next.js provides mechanisms for each concern, but the application still needs to connect them. Spache’s “Automatic” means the existing SPA flow handles the concern without implementing a Next.js rendering layer. JSON GET responses are captured automatically; capture rules are only needed for non-GET requests. Catalog freshness remains configurable.
Next.js is a capable choice when you want to build the storefront around React Server Components and request-time or build-time rendering. Spache is a different trade: keep the current browser app and prepare its public rendered pages without migrating the storefront into a server-rendered framework.