Headless Shopify With Next.js: The Costs After Launch
Shopify’s framework-agnostic Hydrogen preview supports Next.js. Here’s what you still own after launch: API versions, apps, checkout, redirects.
When our own site’s SEO section needed a sitemap rule, nobody shipped us a plugin. We wrote it. Same for the media library, the alt-text fields and the navigation editor. It’s a Next.js app with a custom admin, and every piece is ours to keep alive.
Headless doesn’t remove work. It relocates it into your repo.
Disclosure... I run Everther Studio, a small Next.js studio, so weigh this accordingly. Shopify has just made Next.js a much easier guest in headless. Here’s what that doesn’t change
What shipped, and what’s still a preview
Shopify’s 17 June changelog listed a Hydrogen developer preview where the next version works in any JavaScript framework. It keeps the same commerce primitives, drops the tie to React Router, and deploys to any JavaScript runtime. It includes example implementations for Next.js, SvelteKit, Nuxt, Astro, SolidStart and React Router. On 30 June the Deploy to Vercel button began scaffolding an example Next.js and Hydrogen storefront.
Read the fine print. Shopify’s docs say to use current Hydrogen for the fully supported path, which is React Router. The framework-agnostic version is a preview. I’d prototype on it. I’d think hard before putting revenue on it.
What doesn’t change... you own the data layer
Whatever the stack, your storefront talks to the Storefront API. In Next.js a thin server-side client is most of the plumbing:
2 things in there do real work. The API version comes from an env var, because Hydrogen tracks Shopify’s API versions, which update every three months, and breaking changes can ship with them. Pin it, then bump it on purpose each quarter, with tests. And the cache window is yours to tune. Too short and you hammer the API. Too long and a price change shows up late.
What you rebuild that a theme gave you
Apps... Theme app extensions are expected to be incompatible with headless storefronts. Reviews, loyalty and search each need manual API integration
Search... Storefront API search costs nothing extra but has limited filtering and relevance tuning
Preview and editing... You lose the drag-and-drop theme editor unless you build a custom preview system. If non-developers edit your pages, that’s a project
Cart and accounts... Hydrogen’s cart uses Shopify’s Cart API, a server-persisted cart rather than a localStorage one, and customer accounts go through the Customer Account API
Redirects and URLs... Rebuild the URL structure and redirects, and never chain them or dump everything on the homepage. The preview ships request handlers for the Storefront API proxy, cart endpoints and redirects that run around your framework’s router
Analytics parity... Re-engineering analytics is part of the bill
Checkout stays Shopify’s
The cart hands off to Shopify’s hosted checkout, and customising it is limited unless you’re on Plus with checkout extensibility. Plus is contract-priced, and one guide advises evaluating it for specific checkout, B2B, Functions, API-limit or multi-storefront needs, not just because the storefront is headless. If your reason for going headless is “we want a custom checkout”, read the Plus requirements first.
Cost, without the hosting myth
Hydrogen is free and open source, and Oxygen is included with supported plans. Sources disagree on which plans qualify, so check your entitlement. The cost is engineering. One advisory firm puts a build at roughly $10K to $150K or more. Another source says 3 to 6 months and $40,000 to $150,000. Firms that sell or advise on this work wrote those numbers. Scope it line by line.
If I were prototyping this week, I’d spin up the Deploy to Vercel starter, wire three real queries (product, collection, cart), then time how long the first quarterly API bump takes in a branch. That number tells you more than any quote.
The test I’d run
My judgement, not a law:
Can you name a specific limit you’ve hit in a Liquid theme after trimming apps and tuning the theme?
Can you fund engineering every month, not once?
Does a small conversion lift pay for it at your revenue?
1 advisory firm’s view is that under roughly $10M to $20M, a standard theme with a disciplined app stack delivers nearly all the value. A Shopify expert on the community forum says most brands see better ROI from pushing Liquid to its limits first.
3 yeses, and headless is a real edge, with Next.js now a reasonable way to build it. Otherwise you’re paying to rebuild what the theme already does.
If you’ve hit this, leave a comment. Curious what your setup looks like.
