I am excited to share my latest effort: building a fully custom, high-performance storefront for Shopify using a headless architecture powered by Next.js 16 (App Router).
The key benefit here is the ability to scale the frontend and achieve uncompromising speed, moving past the constraints of typical e-commerce platform themes.
Check out the live application's performance and the clean code structure on GitHub.
Live demo: https://terraceshop.vercel.app
Github repo: https://github.com/saidMounaim/terraceshop
Top comments (1)
Nice project — headless with the App Router is a solid choice for performance control. One thing worth considering as you add more pages: Next.js Link prefetches on hover by default in production, but you can tune this with the
prefetchprop. For large catalogs you may actually want to throttle it or make it viewport-triggered rather than hover-triggered, to avoid hammering the Storefront API for pages the user may never visit.For anyone reading who can't go headless but still wants navigation prefetching on their Liquid theme: Chrome 109+ supports the Speculation Rules API which lets the browser speculatively render pages before a click — similar in concept to what you get from Next.js Link, but natively in the browser. I built a Shopify app around this (Prefetch - apps.shopify.com/prefetch) with hover/viewport fallbacks for non-supporting browsers and connection awareness so it skips prefetching on 2G or Data Saver. Disclosure: I'm the developer.