Hashmat Cheema
The question is rarely Next.js or Shopify. Shopify is a commerce platform: products, inventory, payments, and checkout. Next.js is a framework for building the storefront people actually see. The real choice is between a Shopify theme, a headless storefront built with Next.js on top of a commerce backend such as Shopify, or a fully custom stack. Each suits a different kind of business.
Three ways to build an online store
| Option | What it is | Best for | Main trade-off |
|---|---|---|---|
| Shopify theme | Shopify runs both the storefront and the backend; you customise a theme | New and growing stores, small teams | Design and logic are limited to what themes and apps allow |
| Headless Shopify with Next.js | A custom Next.js storefront using Shopify's Storefront API for products and cart, with Shopify's checkout | Brands that need a distinctive experience, rich content, or several storefronts | You own and maintain a codebase and its hosting |
| Fully custom | Your own storefront, commerce backend, and integrations | Marketplaces, complex B2B pricing, unusual business models | The most responsibility for building, securing, and running it |
When a Shopify theme is the right answer
For most stores, a well-chosen theme is the correct choice, and a custom build would be over-engineering. You get hosting, security, PCI-compliant checkout, and a large app ecosystem without running any infrastructure. Non-technical staff can edit pages with sections and blocks, launch promotions, and manage products themselves.
If your catalogue is straightforward, your differentiation is the product rather than the shopping experience, and you do not have developers on hand, start here. You can always go headless later, and the products, customers, and orders stay in Shopify when you do.
What headless with Next.js gives you
- Full design control: layouts, interactions, and editorial storytelling that themes cannot express.
- Content and commerce together: merge products with content from a headless CMS in the same page, which suits brand-led and content-led stores.
- Performance tuning: pre-render category and product pages and optimise images and scripts precisely.
- Several storefronts on one backend: different brands, regions, or channels sharing one catalogue.
- Custom discovery features, such as guided shopping or an AI shopping assistant, built into the experience instead of bolted on through a widget.
Checkout usually stays on Shopify. A headless storefront builds the cart through the Storefront API and hands the shopper to Shopify's hosted checkout to pay, so payments and compliance remain Shopify's job. Shopify also offers its own React-based headless framework, Hydrogen, as an alternative to Next.js.
What headless costs you
Headless moves work from Shopify to you. You maintain a codebase, its hosting, and its deployments. Content editors need preview workflows that a theme gives them for free. Some Shopify apps work by injecting code into themes and do not function on a headless storefront, so reviews, bundles, or personalisation may need re-integration through their APIs. And search engine basics that a theme handles, such as sitemaps, structured data, and redirects, become your responsibility.
None of this is a reason to avoid headless. It is a reason to choose it deliberately, with a team that will own the storefront after launch.
SEO and performance
Headless is not automatically better for search. It can be faster, and it gives full control over markup and structured data, but only if pages are rendered on the server or pre-rendered so crawlers receive complete HTML. A storefront that renders everything in the browser can rank worse than a theme.
Whichever route you take, the same fundamentals apply: product structured data with price and availability, one canonical URL per product rather than one per variant, controlled crawling of filtered and sorted collection pages, and a careful eye on third-party scripts, which often hurt Core Web Vitals more than the choice of framework.
A decision checklist
- Is your catalogue simple and your brand well served by a good theme? Use a theme.
- Does the shopping experience itself set you apart from competitors? Consider headless.
- Do you need content and commerce tightly mixed on the same pages? Consider headless.
- Do you run several brands, regions, or storefronts from one catalogue? Consider headless.
- Do you have, or can you retain, developers to own the storefront? If not, stay on a theme.
- Does your business model break the assumptions of standard platforms? Only then consider fully custom.
Moving from a theme to headless without losing traffic
Keep the URL structure you already rank with where you can, map every old URL that changes to its new address with a permanent redirect, carry over titles, descriptions, and structured data, and launch in stages if the catalogue is large. Watch Search Console coverage and rankings closely for several weeks after the switch.
How we approached NEXUS
For NEXUS, a luxury fashion storefront, the experience was the product. We built it on Next.js and deployed it on Vercel, with collection-led browsing across outerwear, knitwear, dresses, and more, bestsellers with quick add to bag, season and flash sales, and an AI shopping assistant for shoppers who know the occasion but not the piece. That combination of editorial presentation and guided discovery is the kind of requirement that justifies a custom storefront.
Start on a Shopify theme unless you have a concrete reason not to. Go headless with Next.js when the storefront experience is your competitive edge and you are ready to own the code that delivers it.
Frequently asked questions
They do different jobs. Shopify is a commerce platform that handles products, payments, and checkout. Next.js is a framework for building a custom storefront. Many brands use both: Next.js for the storefront and Shopify as the commerce backend.
Headless Shopify means running your own custom storefront, often built with Next.js or Shopify's Hydrogen, that reads products and manages the cart through Shopify's Storefront API, while Shopify continues to handle inventory, orders, and checkout.
Not automatically. It can be faster and gives full control over markup and structured data, but you take on responsibility for server rendering, sitemaps, redirects, and canonical tags that a theme handles for you.
Yes. A headless storefront typically builds the cart through Shopify's Storefront API and sends the shopper to Shopify's hosted checkout to pay.
Working on something like this?
See how our Software Engineering practice works, or talk to us directly. No pitch.
