Migrate Craft CMS to Next.js Headless

Craft CMS 5 is genuinely good software. The content modeling is flexible, Matrix fields are powerful, and the control panel is one of the best in the business. But the Twig-based frontend is holding your site back.

Every page request hits PHP. Every template renders server-side through a monolithic stack. Your Lighthouse mobile scores sit in the 45-65 range no matter how much you optimize. TTFB crawls at 1.2-2.5 seconds. And your developers are constantly context-switching between Twig templates and whatever JavaScript they need for interactivity.

The fix isn't abandoning Craft's content model. It's decoupling the frontend entirely.

A headless migration to Next.js preserves everything good about Craft — the Matrix blocks, the relational entries, the editorial workflow — while replacing the rendering layer with something that actually performs. Server components, edge caching, incremental static regeneration. The result is sub-300ms TTFB and Lighthouse scores above 95.

The Real Pain Points We See With Craft CMS Sites

We've migrated dozens of Craft sites. The complaints are remarkably consistent:

Performance Ceiling

You've minified CSS, lazy-loaded images, added Redis caching, tuned your nginx config. Lighthouse still shows orange on mobile. The bottleneck is architectural — PHP rendering can't compete with edge-cached static pages or streaming server components. There's no amount of tuning that fixes that.

Matrix Field Complexity at Scale

Matrix fields are brilliant for 50 pages. At 500+ pages with nested Matrix blocks, relational entries, and eager-loading requirements, GraphQL queries slow down noticeably. Template logic turns into deeply nested Twig conditionals. Adding a new block type means touching multiple template files. It compounds fast.

Developer Recruitment

Finding senior Twig/PHP developers who also write good CSS and JavaScript is increasingly difficult. Finding senior React/Next.js developers isn't. Your hiring pool expands dramatically with a headless architecture.

Hosting Overhead

Craft requires PHP, MySQL/Postgres, a web server, and usually Redis or Memcached for acceptable performance. That's £40-120/month minimum for a production setup, plus server maintenance. A Next.js site on Vercel starts at $20/month with zero server management.

Plugin Lock-In

Craft plugins handle SEO, forms, redirects, image transforms, and more. Each one is a dependency with its own update cycle, compatibility matrix, and potential to break on major Craft upgrades. It adds up.

What the New Architecture Looks Like

We don't just swap Twig for React. We rethink the entire stack:

Next.js 15 Frontend on Vercel

App Router with React Server Components. Pages render at the edge in under 100ms. Incremental Static Regeneration means content updates appear in seconds without full rebuilds. Image optimization is built-in via next/image. No nginx tuning, no PHP-FPM workers, no cache invalidation headaches.

Headless CMS for Content

Depending on your needs, we migrate content to Sanity, Contentful, Payload CMS, or keep Craft 5 running in headless mode. If your editors love Craft's control panel, we keep it — just strip out the Twig frontend and query content via Craft's native GraphQL API.

Supabase for Application Data

User authentication, form submissions, dynamic data, real-time features — Supabase handles what a CMS shouldn't. Postgres database, Edge Functions, Row Level Security, and a generous free tier. It replaces the grab-bag of Craft plugins you were using for non-content functionality.

Vercel for Hosting and Edge Network

Automatic deployments from Git. Preview deployments for every PR. Edge caching across 100+ global PoPs. Built-in analytics and speed insights. Infrastructure costs drop while performance improves by an order of magnitude.

Our Migration Process

We run a structured 5-phase migration. No surprises, no scope creep.

Phase 1: Content Audit and URL Mapping (Week 1)

We crawl your existing Craft site with Screaming Frog and export your full content structure. Every section, entry type, Matrix block configuration, and asset volume gets documented. We map every existing URL to its new Next.js equivalent and flag any structural changes.

This phase produces two deliverables: a content migration spec and a complete 301 redirect map.

Phase 2: Architecture and Schema Design (Week 2)

We design the new content schema — whether that's restructured Craft sections for headless mode or a fresh schema in Sanity/Contentful/Payload. Matrix blocks get mapped to typed content blocks with explicit schemas. Relational entries become proper references.

Supabase tables are designed for any application data (users, forms, dynamic content). API contracts are defined between Next.js and all data sources.

Phase 3: Frontend Development (Weeks 3-5)

Next.js components built from your design system. Each Matrix block type becomes a React component with TypeScript interfaces. We use a BlockRenderer pattern that dynamically maps CMS block types to components — adding new block types later is a single file addition.

GraphQL queries are co-located with page components. Data fetching uses Next.js caching with appropriate revalidation intervals. Images go through next/image with proper srcset generation.

Phase 4: Content Migration and 301 Implementation (Week 5-6)

Custom migration scripts handle the actual content transfer. Matrix field data, asset files, relational entries — everything moves to the new schema with data integrity validation.

301 redirects are implemented in next.config.js for static redirects and Vercel's edge middleware for pattern-based rules. We verify every redirect with automated testing.

// next.config.js - example redirect structure
const redirects = async () => [
  { source: '/blog/:slug', destination: '/articles/:slug', permanent: true },
  { source: '/services/:path*', destination: '/what-we-do/:path*', permanent: true },
  // Full map generated from Craft URL audit
];

Phase 5: Testing, Launch, and Monitoring (Week 6-7)

We run parallel testing — old site and new site side-by-side. Core Web Vitals are validated against targets (LCP < 2.5s, CLS < 0.1, INP < 200ms). Every 301 redirect is verified. Google Search Console is monitored for crawl errors.

Launch happens with zero downtime via DNS cutover. We monitor search performance for 30 days post-launch.

SEO Preservation Strategy

SEO is where most migrations go wrong. We've built a process that eliminates the guesswork:

100% URL coverage. Every indexed URL gets a 301 redirect. No exceptions. We cross-reference Google Search Console data, Screaming Frog crawls, and sitemap.xml to catch every URL.

Metadata migration. Title tags, meta descriptions, Open Graph data, and structured data (JSON-LD) are migrated and validated per-page. If you were using Craft's SEOmatic plugin, we replicate its output exactly.

Internal link integrity. All internal links are updated to new URLs. No redirect chains. No broken links.

XML sitemap generation. Dynamic sitemap generated from CMS content, submitted to Google Search Console on launch day.

Canonical tags and hreflang. Preserved exactly as they were — or improved if they were misconfigured.

Our clients typically see less than 3% organic traffic fluctuation during migration, with recovery and growth within 4-6 weeks.

Timeline and Pricing

Transparent pricing. No discovery fees, no hidden costs.

Small sites (under 50 pages): £8,000-£15,000 / $10,000-$18,000. 4-5 week timeline.

Medium sites (50-500 pages): £15,000-£35,000 / $18,000-$42,000. 6-8 week timeline.

Large sites (500+ pages): £35,000-£80,000 / $42,000-$95,000. 8-12 week timeline.

Pricing scales with content complexity (number of Matrix block types, relational depth, multilingual requirements) and custom functionality (Supabase integrations, authentication, e-commerce).

Ongoing hosting costs post-migration: Vercel Pro at $20/month, Supabase Pro at $25/month, and your CMS hosting if you're keeping Craft headless, or your CMS subscription. Total infrastructure typically runs $50-100/month — often less than your current Craft hosting alone.

Every project starts with a free migration audit. We review your current Craft site, estimate content complexity, and deliver a fixed-price quote within 48 hours.