Skip to main content
Sitecore Migration Simulator
Sitecore SXAHeadless Next.js

The decisions you'll face migrating Sitecore to headless Next.js

An interactive walkthrough of every architecture decision in a Sitecore SXA → headless Next.js migration. Real code examples. Real trade-offs. No hand-waving.

10migration steps
4phases
30+decision points
20+real code examples
Start SimulationDownload Checklist

Migration phases

Phase 1

Audit & Architecture

Catalogue your Sitecore install, choose the headless approach, and map rendering modes before writing a line of code.

3 steps

Phase 2

Component Migration

Map SXA renderings to React components, wire the Layout Service, and migrate the Media Library to next/image.

3 steps

Phase 3

Advanced Features

Migrate personalization, replace Solr search, and configure multisite middleware routing.

3 steps

Phase 4

DevOps & Launch

Replace TDS/Unicorn pipelines with GitHub Actions and atomic Netlify deploys.

1 step

Interactive simulator

Step 1 / 100 completed
Phase 1 — Audit & ArchitectureArchitecture Critical

Assess Your Sitecore Installation

Understand your starting point before planning anything else.

Context

The scope and complexity of your migration depends entirely on what you're migrating from. Sitecore MVC with SXA, vanilla Sitecore MVC, and JSS all require fundamentally different approaches. Attempting to plan a headless migration without this audit is the most common source of blown timelines.

Code Comparison

Sitecore: SXA Razor view (typical starting point)
@* SXA Component: PromoComponent.cshtml *@
@using Sitecore.Mvc.Presentation
@model RenderingModel

<div class="component promo @Html.Sitecore().GetComponentCssClassNames()">
  <div class="component-content">
    @if (Model.Item != null)
    {
      <div class="field-promoicon">
        @Html.Sitecore().Field("PromoIcon", Model.Item)
      </div>
      <div class="field-promotext">
        @Html.Sitecore().Field("PromoText", Model.Item)
      </div>
      <div class="field-promolink">
        @Html.Sitecore().Field("PromoLink", Model.Item)
      </div>
    }
  </div>
</div>
Inventory output: what you need to catalogue
# Migration Audit Checklist Output
sitecore_version: "10.3"
rendering_mode: SXA           # MVC | SXA | JSS

components:
  total: 47
  with_datasources: 38         # → need JSS field mapping
  rendering_parameters_only: 9 # → simpler migration
  custom_mvc_controllers: 6    # → require API endpoints
  third_party_renderings: 4    # → evaluate replace vs wrap

content_tree:
  total_items: 12_400
  media_items: 3_200
  multisite: true
  sites: ["corporate", "regional-emea", "regional-apac"]

personalization:
  rules_in_use: 23
  xdb_dependent: 14            # → evaluate replacement
  content_testing: true

known_risks:
  - Custom pipeline processors: 8
  - Glass.Mapper ORM usage: true  # → replace with typed interfaces
  - Inline presentation details: "~200 items"

Architecture Decision

Choose your approach