happycoding

Me­du­sa.js und Head­less CMS kom­bi­nie­ren: Ar­chi­tek­tur­leit­fa­den für ska­lier­ba­re E‑­Com­mer­ce‑­Er­leb­nis­se

Me­du­sa.js als mo­du­la­re Com­mer­ce-En­gi­ne + ein Head­less CMS wie Sa­ni­ty, Di­rec­tus oder Stra­pi er­gän­zen sich per­fekt: Com­mer­ce-Lo­gik bleibt sau­ber ent­kop­pelt, Con­tent-Teams ar­bei­ten frei im ge­wohn­ten Re­dak­ti­ons-Work­flow.
4 Min. LesezeitMatthias RadscheitMatthias Radscheit
Happycodingde-DE

TL;DR

Medusa.js als modulare Commerce-Engine + ein Headless CMS wie Sanity, Directus oder Strapi ergänzen sich perfekt: Commerce-Logik bleibt sauber entkoppelt, Content-Teams arbeiten frei im gewohnten Redaktions-Workflow.

Me­du­sa.js und Head­less CMS kom­bi­nie­ren: Ar­chi­tek­tur­leit­fa­den für ska­lier­ba­re E‑­Com­mer­ce‑­Er­leb­nis­se

Wenn Com­mer­ce-Lo­gik und Con­tent-Er­leb­nis in ei­nem Sys­tem ver­mischt wer­den, lei­den oft Ge­schwin­dig­keit, Fle­xi­bi­li­tät und Team­pro­duk­ti­vi­tät. Ein ent­kop­pel­ter An­satz löst das: Me­du­sa.js über­nimmt als Head­les­s‑­Com­mer­ce‑En­gi­ne Check­out, Wa­ren­korb, Prei­se, In­ven­tar und Pro­mo­ti­ons, wäh­rend ein Head­less CMS wie Sa­ni­ty, Di­rec­tus oder Stra­pi In­hal­te, Landing­pa­ges, Ka­te­go­rie­sei­ten, As­sets und re­dak­tio­nel­le Work­flows steu­ert. In die­sem Bei­trag zei­gen wir, wie bei­de Wel­ten sau­ber zu­sam­men­spie­len – mit In­te­gra­ti­ons­mus­tern, Da­ten­flüs­sen, Best Prac­ti­ces und Code­bei­spie­len auf Ba­sis von Next­JS.

Definition: Medusa.js
Open-Source Headless‑Commerce-Plattform (Node.js/TypeScript), die Kernfunktionen wie Produkte, Varianten, Preislisten, Inventar, Checkout und Order Management via API bereitstellt. Durch ein Plugin- und Event-System lässt sich Medusa tief in bestehende Stacks integrieren.
Definition: Headless CMS
Ein Content-Management-System, das Content über APIs bereitstellt und die Darstellung (Frontend) entkoppelt. Redaktionen arbeiten in flexiblen Content-Modellen, Entwickler integrieren das CMS via REST/GraphQL in beliebige Frontends.

War­um Me­du­sa.js und ein Head­less CMS kom­bi­nie­ren?

  • Sau­be­re Ent­kopp­lung: Com­mer­ce-Do­mä­ne (Ka­ta­log, Prei­se, Check­out) bleibt un­ab­hän­gig von Con­tent-Do­mä­ne (Sto­ries, SEO, Me­di­en).
  • Bes­se­re Team-Speed: Mar­ke­ting baut Landing­pa­ges und A/B-Tests im CMS, ohne die Com­mer­ce-En­gi­ne zu be­rüh­ren.
  • Ska­lie­rung & Per­for­mance: Caching/ISR im Front­end, op­ti­mier­te Su­che (z. B. Elastic­se­arch) und schlan­ke APIs für Core-Trans­ak­tio­nen.
  • Mehr­ka­nal-Fä­hig­keit: Web, App, POS oder Mar­ket­places grei­fen auf die­sel­be Com­mer­ce-API zu – Con­tent wird ka­nal­ad­ap­tiert.
  • Go­ver­nan­ce & Si­cher­heit: Be­rech­ti­gun­gen, Ver­sio­nie­rung und Frei­ga­ben im CMS; sen­si­ble Com­mer­ce-Lo­gik iso­liert in Me­du­sa.

Ziel­ar­chi­tek­tur im Über­blick

Eine pra­xis­er­prob­te Re­fe­renz be­steht aus drei Schich­ten: (1) Me­du­sa.js als Com­mer­ce-Core mit Event- und Plug­in-Sys­tem, (2) ein Head­less CMS für struk­tu­rier­te In­hal­te, Ta­xo­no­mien, Sto­ry­tel­ling und SEO, (3) ein Next.js-Front­end als Or­ches­trie­rungs­schicht, die bei­de APIs zu­sam­men­führt. Für Su­che/Lis­ting emp­fiehlt sich eine In­de­xie­rung in Elastic­se­arch bzw. Open­Se­arch, um Fa­cet­tie­rung, Re­le­vanz und Au­to­com­ple­te zu op­ti­mie­ren.

Next.js Leit­fa­den

In­te­gra­ti­ons­mus­ter: Wer ver­wal­tet wel­che Da­ten?

DomäneSystem of Record (SoR)SynchronisationBemerkungen
Produkt-Stammdaten (Titel, SKU, Varianten, Preise)Medusa.jsRead im Frontend; optional Index in ElasticsearchCommerce-kritisch, Transaktionsnähe
Marketing-Content (Hero, Story, USPs, SEO)Headless CMSRead im Frontend; ggf. Webhooks zu Medusa für MetafelderRedaktionelle Workflows & Vorschau
Kategorieseiten & NavigationHeadless CMSRead im FrontendFreie Sortierung & Kampagnenbereiche
Produkt-Storyblöcke (Lookbooks, Anleitungen)Headless CMSReferenzen auf SKU/HandleProdukt-Detailseiten kombinieren Content + Commerce
Suchindex (Listing, Facetten, Autocomplete)Elasticsearch/OpenSearchBatch/Streaming aus Medusa + CMSOptimiert für Query-Speed, nicht SoR

Sa­ni­ty, Di­rec­tus oder Stra­pi? – Aus­wahl nach Use Case

KriteriumSanityDirectusStrapi
StärkenFlexible Portable Text-Modelle, Realtime, exzellente Editor UXSQL-first, Admin-UI über bestehende DB, granulare RollenNode-basiert, Plugin-Ökosystem, REST/GraphQL out of the box
Custom Content StudioSehr stark (configurierbar, Preview, GROQ)UI konfigurierbar, Policies auf FeldebeneAdmin UI + Content-Types per Code/GUI
APIsGROQ/Realtime, RESTREST/GraphQL via ExtensionsREST/GraphQL
Hosting/BetriebCloud/Self-hostSelf-host/CloudSelf-host/Cloud
Typische E‑Com Use CasesStorytelling, Kampagnen, komplexe Content-ModelleDatenhub, PIM‑ähnliche Strukturen, DSGVO-firstSchneller Start, solide Features, OSS‑Ecosystem

Sa­ni­ty Ser­vices

Da­ten­flüs­se & Sync-Stra­te­gien

  1. CMS‑→­Front­end: Re­dak­ti­ons­in­hal­te wer­den per API ge­le­sen; Pre­view-Mo­dus er­mög­licht Live-Vor­schau mit rea­len Me­du­sa-Da­ten.
  2. Me­du­sa‑→­Front­end: Pro­dukt­da­ten, Prei­se, Ver­füg­bar­keit on de­mand; Cart/Check­out stets ge­gen Me­du­sa API.
  3. Batch-In­dex (Me­du­sa+CMS→E­lastic­se­arch): nächt­lich/er­eig­nis­ba­siert; Del­ta-Up­dates per Web­hook, um Lis­tings/Fil­ter schnell zu hal­ten.
  4. Me­ta­fel­der/Re­fe­ren­zen: CMS spei­chert nur schlan­ke Ver­knüp­fun­gen (SKU, Hand­le, Pro­dukt-ID); Me­du­sa bleibt SoR für Com­mer­ce-Fak­ten.
  5. Me­di­en: As­sets via CMS DAM; Va­ri­an­ten­bil­der kön­nen in Me­du­sa re­fe­ren­ziert sein, Front­end nor­ma­li­siert die Quel­len.

Re­fe­renz-Code: Next­JS Rou­te, die CMS + Me­du­sa zu­sam­men­führt

/* /app/(store)/products/[handle]/page.tsx */\nimport { notFound } from \"next/navigation\";\nimport { getProductByHandle } from \"@/lib/medusa\"; // Medusa REST\nimport { getProductStoryByHandle } from \"@/lib/cms\"; // Sanity/Directus/Strapi\n\nexport default async function ProductPage({ params }: { params: { handle: string } }) {\n  const [product, story] = await Promise.all([\n    getProductByHandle(params.handle),\n    getProductStoryByHandle(params.handle)\n  ]);\n  if (!product) return notFound();\n\n  return (\n    <>\n      <h1>{story?.seoTitle ?? product.title}</h1>\n      {/* Hero aus CMS, Preis/Varianten aus Medusa */}\n      {story?.hero && <Hero {...story.hero} />}\n      <BuyBox\n        price={product.prices?.[0]}\n        variants={product.variants}\n        inventory={product.inventory}\n        productId={product.id}\n      />\n      {/* Rich Content Blöcke aus CMS */}\n      {story?.blocks?.map((b) => /* render */ null)}\n      {/* Verfügbarkeits-Hinweise, dynamisch aus Medusa */}\n    </>\n  );\n}

Me­du­sa Events nut­zen: Web­hooks für Su­che und CMS-Re­fe­ren­zen

// src/subscribers/product-updated.ts\nimport { MedusaSubscriber } from \"@medusajs/medusa\";\nimport { updateSearchIndex } from \"../services/search\";\nimport { notifyCms } from \"../services/cms\";\n\nconst subscriber: MedusaSubscriber = {\n  event: \"product.updated\",\n  context: { subscriberId: \"product-updated-search-cms\" },\n  async handle(event) {\n    const productId = event.data?.id;\n    if (!productId) return;\n    await updateSearchIndex(productId); // Elasticsearch/OpenSearch\n    await notifyCms(productId); // z.B. Metafelder aktualisieren\n  },\n};\n\nexport default subscriber;\n

SEO & Per­for­mance: ISR, Edge Caching, struk­tu­rier­te Da­ten

  • In­cre­men­tal Sta­tic Re­ge­ne­ra­ti­on (ISR) für Ka­te­go­rie­sei­ten und Pro­dukt-De­tail­sei­ten, um Con­tent-Än­de­run­gen schnell aus­zu­spie­len.
  • Struk­tu­rier­te Da­ten (Pro­duct, Of­fer, Bread­crumb) im Front­end ge­ne­rie­ren; Prei­se/Ver­füg­bar­keit live aus Me­du­sa ein­bet­ten.
  • Bil­der über ein zen­tra­les Image CDN (z. B. Next­JS Image) op­ti­mie­ren; Alt-Tex­te und Cap­ti­ons im CMS pfle­gen.
  • Fa­cet­tier­te Su­che nicht ser­ver­sei­tig ren­dern – son­dern als schnel­le API (Elastic­se­arch) + cli­ent-/ser­ver­kom­po­nier­te UI.
  • Ed­ge‑­Caching für an­ony­me GE­T‑­Rou­ten; Cart/Check­out blei­ben stets dy­na­misch und un­ge­cacht.

In­ter­na­tio­na­li­sie­rung & Ka­ta­log­va­ri­an­ten

Me­du­sa ver­wal­tet Preis­lis­ten und Wäh­run­gen; das CMS lie­fert lo­ka­li­sier­te Tex­te, Me­dia und SEO-Fel­der. Im Front­end wird zur Lauf­zeit eine Kom­bi­na­ti­on aus Re­gi­ons-/Preis­lis­ten­lo­gik (Me­du­sa) und Sprach­wahl (CMS) an­ge­wen­det. Für B2B-Ka­ta­lo­ge mit kun­den­spe­zi­fi­schen Prei­sen sind Preis­lis­ten/Cus­to­mer Groups in Me­du­sa der rich­ti­ge Ort – das CMS steu­ert wei­ter­hin die Dar­stel­lung.

Pro­duk­ti­vi­tät der Re­dak­tio­nen stei­gern: Work­flows, Pre­view, Cus­tom Blö­cke

  • Vor­schau‑­Links mit Si­gna­tu­ren (Draft Mode in Next.js) – Re­dak­teur:in­nen se­hen ech­te Prei­se/Be­stän­de live.
  • Com­po­nent Li­bra­ry als CMS‑­Blö­cke (Hero, USP-Grid, Ver­gleichs­ta­bel­len, FAQ) – kon­sis­ten­te Mar­ken­füh­rung.
  • Re­lease-Pla­nung über CMS-Sche­du­ler – Start/Ende von Kam­pa­gnen ohne De­v‑Ein­satz.
  • Va­li­die­run­gen (z. B. Pflicht­fel­der) und Con­ten­t‑Lin­ting (Bro­ken Links, Al­t‑­Tex­te) für SEO-Qua­li­tät.

Com­pli­ance, Hos­ting-Mo­del­le & DSGVO

Vie­le B2B‑­Un­ter­neh­men be­vor­zu­gen ei­gen­be­trie­be­nes Hos­ting oder EU­‑­Cloud-Um­ge­bun­gen. So­wohl Me­du­sa.js als auch gän­gi­ge Head­less CMS las­sen sich selbst hos­ten oder da­ten­schutz­kon­form be­trei­ben. Rol­len-/Rech­te­kon­zep­te tren­nen sen­si­ble Com­mer­ce‑­Da­ten (Prei­se, Or­ders) klar von re­dak­tio­nel­len In­hal­ten.

Im­ple­men­tie­rungs­fahr­plan in 6 Schrit­ten

  1. Zie­le & KPIs de­fi­nie­ren (Con­ver­si­on, AOV, Ti­me‑­to‑­Pu­blish, SEO‑K­PIs).
  2. Do­mä­nen­zu­schnitt fest­le­gen (Wer ist SoR wo­für?) und Con­ten­t‑­Mo­del­le de­si­gnen.
  3. Me­du­sa auf­set­zen (Re­gio­nen, Preis­lis­ten, In­ven­tar), Events & Plug­ins pla­nen.
  4. CMS auf­set­zen (Con­ten­t‑­Sche­mas, Rol­len, Pre­view), As­se­t‑­Pipe­lines de­fi­nie­ren.
  5. Next.js Front­end im­ple­men­tie­ren: Da­ten­or­ches­trie­rung, ISR, Track­ing.
  6. Su­che & Ana­ly­tics in­te­grie­ren (Elastic­se­arch, Con­sent, BI‑­Pipe­lines) und Go‑­Li­ve mit Mo­ni­to­ring/Ob­ser­va­bi­li­ty.

Bei­spiel-Use Ca­ses aus der Pra­xis

  • In­dus­trie/KMU: Pro­dukt­ka­ta­lo­ge mit va­ri­an­ten­rei­chen SKUs, tech­ni­sche Da­ten­blät­ter aus dem CMS, kun­den­spe­zi­fi­sche Prei­se in Me­du­sa.
  • En­ter­tain­ment/Events: Ti­cke­ting-/Merch-Kom­bi­na­ti­on, re­dak­tio­nel­le Kam­pa­gnen, Hoch­las­t‑­Peak durch Caching + Edge + Such­in­dex.
  • En­er­gie & IoT: Bund­les/Abos via Me­du­sa, er­klä­rungs­be­dürf­ti­ge In­hal­te, Docs & Wis­sens­da­ten­bank im CMS.
  • D2C: Sto­ry­tel­ling-first PDPs (Rich Me­dia, UGC), schnel­le Ite­ra­ti­on von Landing­pa­ges, Pro­mo­ti­ons als Me­du­sa-Preis­lis­ten.

Häu­fi­ge Fall­stri­cke und wie man sie ver­mei­det

  • Dop­pel­te Da­ten­hal­tung: Pro­dukt­fak­ten ge­hö­ren nach Me­du­sa; das CMS re­fe­ren­ziert nur IDs/SKUs.
  • Zu gro­ße Ser­ver­kom­po­nen­ten: Hal­ten Sie Com­mer­ce‑­Calls schlank; nut­zen Sie se­lek­ti­ve Reva­li­die­rung statt Full Re­builds.
  • Feh­len­de Vor­schau‑­Pa­ri­ty: Pre­view muss Prei­se/Be­stän­de real aus Me­du­sa zie­hen, sonst ent­ste­hen Über­ra­schun­gen.
  • Su­che ohne In­dex: Lis­ting/Fil­ter­su­che di­rekt aus CMS/Me­du­sa ist sel­ten per­for­mant ge­nug – In­dex ein­füh­ren.
  • Un­kla­re Ow­ner­ship: Ein Da­ta‑­Con­tract (Ty­pen, Fel­der, Ver­ant­wort­lich­kei­ten) ver­hin­dert Drift zwi­schen Teams.

Wie wir Sie un­ter­stüt­zen

Als tech­ni­sche B2B‑A­gen­tur ent­wer­fen wir ent­kop­pel­te E‑­Com­mer­ce‑­Ar­chi­tek­tu­ren, im­ple­men­tie­ren Next.js Frontends, in­te­grie­ren Me­du­sa.js und bau­en Ihr Head­less CMS in­klu­si­ve Re­dak­ti­ons­‑­Work­flows, Su­che und Ob­ser­va­bi­li­ty auf. Wir un­ter­stüt­zen Teams von der Mach­bar­keits­ana­ly­se bis zum Go‑­Li­ve und kon­ti­nu­ier­li­cher Op­ti­mie­rung – in­klu­si­ve A/B‑­Test­ing und SEO‑­Guar­drails.

Pro­jekt pla­nen: Work­shop oder Dis­co­very Call

Sie eva­lu­ie­ren Me­du­sa.js in Kom­bi­na­ti­on mit ei­nem Head­less CMS oder möch­ten eine be­stehen­de Com­mer­ce‑­Ar­chi­tek­tur mo­der­ni­sie­ren? In ei­nem kom­pak­ten Work­shop de­fi­nie­ren wir ge­mein­sam Zie­le, Ri­si­ken und eine Road­map – in­klu­si­ve Ar­chi­tek­tur­vor­schlag und Auf­wands­schät­zung.

Spre­chen Sie mit uns

Las­sen Sie uns über Ih­ren Use Case spre­chen – von der MV­P‑­Pi­lo­tie­rung bis zur Ska­lie­rung. Jetzt Ter­min ver­ein­ba­ren.

Ähnliche Artikel

TCO-Vergleich: WordPress vs. Sanity + Next.js über 3 Jahre

Vom Pitch zum Go-Live in 90 Tagen: Unser Rapid-Delivery-Framework für B2B-Websites

Back Friday & Winter Sale Banner Onlineshops

Die algorithmische Jahreszeit: Warum der Sale niemals endet

Offen für ausgewählte Projekte

Lassen Sie uns über Ihr Projekt sprechen

Bu­chen Sie ei­nen un­ver­bind­li­chen Ter­min, schrei­ben Sie uns eine E-Mail oder nut­zen Sie das For­mu­lar – wir freu­en uns auf Ihre Nach­richt.

150+
Abgeschlossene Projekte
15
Jahre Erfahrung
8
Senior‑Level Teammitglieder
Termin vereinbarenhej@happycoding.agency