Headless Shopify with Next.js is the right architecture for stores that have outgrown Liquid themes. But two-thirds of headless commerce migrations we've seen elsewhere stall in month 4, burning budget without going live. Here's the 8-week playbook we use that doesn't.
Week 1–2: Discovery, not coding
Before a single line of Next.js, we map every existing URL, every meta tag, every redirect, every collection filter, and every checkout customisation. Migrations fail because someone forgot the 2,400 product URLs that ranked.
Week 3–4: The new front-end shell
Next.js 14+ with the App Router, Shopify Storefront API via GraphQL, and Tailwind. Build the layout, navigation, PDP and collection pages first. Skip the cart for now, Shopify's checkout still does the heavy lifting on /checkout.
Week 5: Search, filters, and recommendations
This is where most teams underestimate scope. Shopify's storefront search is decent but limited. We typically integrate Algolia or Typesense for instant search; recommendation widgets get rebuilt from scratch.
Week 6: The redirect map
Every old URL gets a 301. Every. Single. One. We script this from the URL audit done in week 1. Lose this step and you lose 30–60% of organic traffic in week 1 of launch.
Week 7: Soft launch + Core Web Vitals tuning
Deploy behind a feature flag or staging domain. Run Lighthouse on the top 20 pages. LCP under 2s, INP under 200ms, CLS under 0.1. Pre-render top categories. Image-optimise everything. (Deeper dive: our Core Web Vitals 2026 guide.)
Week 8: Cutover
DNS swap on a Tuesday morning (never Friday). Watch Search Console, watch checkout funnels, watch GA in real-time. Have the old theme on stand-by for one week.
The shortcuts that always backfire
- Skipping the redirect map, you'll feel it in week 2.
- Building cart pages outside Shopify checkout, your conversion will crater.
- Forgetting metafield-driven content (size guides, ingredient lists).
- Not testing on flaky 3G mobile networks.
Headless done right pays for itself in 6–9 months through page-speed gains alone. See our ecommerce capabilities, browse the web portfolio, or talk to us.