Headless Shopify with Next.js: When It Makes Sense
Headless Shopify means using Shopify for products, inventory, orders and checkout while building the customer-facing storefront as a separate application, often with Next.js. It promises complete design freedom, faster pages and content from anywhere. It also means more code to build, host and maintain. For some brands it is a clear win; for many others, a well-built Shopify theme delivers the same results for a fraction of the cost.
This guide explains how headless Shopify works with Next.js, the honest pros and cons, indicative costs and a simple test for deciding whether your store should go headless.
How Headless Shopify Works
In a headless setup, Shopify becomes the commerce back end and your Next.js app becomes the front end, connected through Shopify’s GraphQL Storefront API. The pieces usually look like this:
- Shopify holds products, prices, inventory, customers, orders, discounts and the checkout.
- Next.js storefront renders pages with server components, static generation or incremental revalidation, and fetches data from the Shopify Storefront API.
- Headless CMS (optional) such as Sanity, Contentful or Storyblok manages editorial content, landing pages and lookbooks. Shopify metaobjects can cover simpler content needs.
- Hosting on Vercel, Netlify, AWS or similar, with edge caching.
- Checkout stays on Shopify. The cart is created through the API and customers are sent to Shopify’s checkout, which keeps payments, fraud checks and compliance with Shopify.
Shopify also offers its own headless stack, Hydrogen, with Oxygen hosting. Next.js is a popular alternative when your team already uses React and Next.js elsewhere, or you want more hosting flexibility. Our comparison of Next.js vs React explains why Next.js is a common choice for content-heavy storefronts.
Headless Shopify vs a Shopify Theme
The short version: a theme is faster to launch and cheaper to run, while headless gives you full control at the price of more engineering. The table compares them on the factors that matter most.
| Factor | Online Store 2.0 theme | Headless with Next.js |
|---|---|---|
| Design freedom | High within Liquid sections and blocks | Unlimited |
| Time to launch | 4 – 12 weeks | 3 – 6 months |
| Indicative build cost (USD) | $10,000 – $60,000 | $60,000 – $200,000+ |
| App compatibility | Most storefront apps work out of the box | Storefront apps often need custom integration |
| Merchandiser control | Theme editor, no code | Depends on CMS setup |
| Performance ceiling | Good with disciplined theme code | Excellent when built well |
| Ongoing maintenance | Low | Moderate to high (front-end team, hosting) |
When Headless Shopify Makes Sense
Headless Shopify pays off when your storefront needs something a theme genuinely cannot do, and you have the budget and team to support it. Typical cases include:
- Content-led brands that publish editorial stories, lookbooks or guides alongside products and want one seamless experience.
- Multiple front ends such as a website, a mobile app, in-store kiosks and marketplaces that all share one product catalog.
- Highly custom experiences like product configurators, 3D or AR viewers, or complex bundle builders.
- Combining several systems: Shopify for commerce, a separate CMS, a search service and a loyalty platform presented as one site.
- An existing React or Next.js team that can own the storefront and wants to share components with other products.
When It Does Not Make Sense
Headless is the wrong choice when the main goal is “a faster site” or “a better design”. A modern Shopify theme with lean code, optimized images and few apps can pass Core Web Vitals comfortably. Avoid headless if:
- Your team relies on many storefront apps for reviews, upsells and personalization, since each will need custom integration work.
- You do not have, or do not want to pay for, ongoing front-end development capacity.
- Your marketing team needs to build landing pages daily without developers and you have not budgeted for a CMS with visual editing.
- Your annual revenue does not justify a six-figure front-end build plus maintenance.
Key Technical Decisions
If you do go headless, a few early decisions shape performance, SEO and cost for years.
Rendering and caching
Use static generation or cached server rendering for product and collection pages, with on-demand revalidation triggered by Shopify webhooks when products change. Keep cart and customer data dynamic. The Next.js documentation covers caching and revalidation patterns in detail.
SEO
You become responsible for things a theme handles automatically: canonical URLs, sitemaps, structured data for products, hreflang for international stores and redirects. Plan these into the first release, not as an afterthought.
Customer accounts and analytics
Use Shopify’s Customer Account API for login and order history, and wire up analytics and consent so storefront events reach Shopify and your marketing tools correctly.
Performance discipline
Headless is not automatically fast. Heavy client-side JavaScript, unoptimized images and third-party scripts can make a Next.js storefront slower than a good theme. Set performance budgets against Core Web Vitals and check them on every release.
What a Headless Shopify Project Involves
A typical headless Shopify build runs in five phases over three to six months. Knowing them helps you judge proposals and plan internal time.
- Architecture and discovery (2–3 weeks): choose the framework, CMS, search and hosting; map every storefront app to an API integration or replacement; define the URL structure and redirect plan.
- Design system and UX (3–5 weeks): build reusable components in Figma that map one-to-one to React components and CMS blocks, so marketers can assemble pages later.
- Storefront development (6–12 weeks): product, collection, search, cart and account pages, CMS integration, webhooks for revalidation and analytics events.
- Integrations and QA (2–4 weeks): reviews, loyalty, search, consent management, cross-device testing and load testing before peak trading.
- Launch and optimization (ongoing): redirect checks, Search Console monitoring and performance tuning against real-user data.
Budget for ongoing costs too: front-end hosting, CMS subscriptions, and a development retainer for new features and framework upgrades. As a rough guide, plan 15–25% of the build cost per year to keep a headless storefront current.
A Practical Path: Start With a Theme, Go Headless Later
For most growing brands, the lowest-risk route is to launch on a fast custom theme, prove the business, then move specific experiences headless when there is a clear reason. Because Shopify remains the system of record, products, customers and orders do not need migrating when you switch the front end. Some brands go part-way, keeping the main store on a theme and building a headless microsite or app for a specific campaign or experience.
Questions to Ask Before Going Headless
Answer these honestly with your team before you commit budget. If you cannot answer “yes” to at least three, a custom theme is probably the better investment for now.
- Is there a specific customer experience we cannot deliver with Liquid sections and blocks?
- Do we have, or will we fund, a front-end team for at least the next two years?
- Will the storefront serve more than one channel, such as a website and a mobile app?
- Have we listed every storefront app and confirmed it offers an API or SDK?
- Does our expected revenue gain clearly exceed the extra build and maintenance cost?
Frequently Asked Questions
Is headless Shopify better for SEO?
Not inherently. It can perform very well because you control markup and speed, but you also take on responsibility for sitemaps, canonicals and structured data. A well-built theme ranks just as well for most stores.
Do I need Shopify Plus to go headless?
No. The Storefront API is available on standard paid plans. Plus adds checkout customization, B2B and higher limits that larger headless builds often want. See our Shopify Plus migration checklist if you are considering both.
Should I use Hydrogen or Next.js?
Hydrogen is Shopify’s own framework with built-in commerce components and free Oxygen hosting on eligible plans. Next.js suits teams already invested in it or needing broader hosting and CMS flexibility. Both are sound choices.
Can I still use Shopify apps with a headless store?
Back-office apps (inventory, fulfilment, accounting) work as normal. Storefront apps that inject code into themes usually need their API or SDK integrated into your Next.js front end.
Talk to Us About Your Shopify Architecture
Sigmato builds both custom Shopify themes and headless storefronts. Our Shopify developers and React and Next.js engineers can help you decide which approach fits your roadmap, and our guide to a headless CMS covers the content side.
Sources and References
