Why Next.js for Shopify?
Next.js is the most popular React framework for production web applications, and Vercel’s Next.js Commerce template provides a ready-made Shopify integration. While Hydrogen is Shopify’s first-party solution, Next.js offers broader ecosystem support and deployment flexibility.
Architecture Overview
App Router vs Pages Router
Use Next.js 14+ with the App Router for the latest features — Server Components, streaming, parallel routes, and intercepting routes. Server Components reduce client-side JavaScript by rendering on the server with zero bundle impact.
Data Fetching Strategy
Use the Shopify Storefront API (GraphQL) for product data, collections, and cart operations. Implement React Server Components for data fetching — each component fetches its own data independently, enabling streaming and selective hydration.
Rendering Modes
- Static Generation (SSG): Pre-render product pages at build time for instant loads
- Incremental Static Regeneration (ISR): Update static pages in the background without full rebuilds
- Server-Side Rendering (SSR): For personalised or frequently changing content
- Client-Side: For interactive features like cart drawer and search
Key Implementation Areas
Product Pages
Generate static product pages using generateStaticParams. Implement ISR with a revalidation period (60-300 seconds) to keep prices and availability current without rebuilding. Use the Storefront API’s product query for comprehensive product data.
Collection and Search
Implement server-side collection filtering and sorting using Shopify’s API parameters. Use URL search params for filter state to maintain sharability and SEO. Pagination using cursor-based APIs for infinite scroll or page navigation.
Cart Management
Use Shopify’s Cart API to create carts, add/remove items, and apply discounts. Store the cart ID in cookies for persistence across sessions. Build a cart context provider for real-time cart state management across components.
Checkout
Redirect to Shopify’s hosted checkout for payment processing. This maintains PCI compliance — you never handle payment data. Customise the checkout experience through Shopify Plus checkout extensibility or the pre-checkout experience in your Next.js frontend.
SEO Implementation
Metadata API
Use Next.js 14’s Metadata API for dynamic meta tags. Generate Open Graph images, structured data, and canonical URLs from Shopify product data. Implement proper technical SEO including sitemaps, robots.txt, and hreflang.
Performance Benefits
Server Components eliminate JavaScript hydration for static content. Streaming enables faster Time to First Byte. Edge functions place rendering close to users globally. These architectural advantages translate directly into better Core Web Vitals.
Deployment
Vercel (Recommended)
Deploy to Vercel for zero-configuration hosting with automatic SSL, CDN, serverless functions, and edge rendering. Vercel’s infrastructure is optimised for Next.js with features like preview deployments and analytics.
Self-Hosted
Deploy to AWS, Google Cloud, or any Node.js hosting. Self-hosting requires managing infrastructure, CDN, SSL, and scaling. Choose this only if you have specific infrastructure requirements or existing cloud operations.
Hydrogen vs Next.js: How to Choose
Choose Hydrogen if you want Shopify’s first-party support, Oxygen hosting, and tighter platform integration. Choose Next.js if you prefer broader ecosystem tools, Vercel deployment, or need to integrate with non-Shopify systems heavily. Either way, consider whether a custom Shopify theme meets your needs at lower cost first.
Planning a Next.js commerce project? Consult our headless commerce team.
