X

Building a Scalable Multi‑Site Platform with Headless Drupal 11 & Next.js (A MACH Approach)

In today’s digital ecosystem, businesses often need to manage multiple web properties—each tailored to local markets or brand verticals—while maintaining consistency and efficiency. Enter the MACH architecture: Microservices, API-first, Cloud-native, and Headless. Combining Headless Drupal 11 with Next.js offers a powerful MACH-aligned stack for scalable, multi-site platforms.

1. Why Choose a MACH Stack?

  • Microservices & API-first: Drupal’s JSON:API and GraphQL modules make it an ideal content hub. It powers content across services through standardized, versioned APIs .

  • Cloud-native: Host Drupal in Docker or Kubernetes and Next.js on platforms like Vercel—enabling flexibility and horizontal scaling.

  • Headless: A React/Next.js frontend delivers modern UX—React-powered dynamic UIs, faster builds, near-instant previews—while Drupal continues its role as a content engine .

2. Multi‑Site on One Drupal Backend

Use Drupal as a single backend serving multiple domain frontends:

  • Site identification: Add a custom header, e.g., X-Site-ID, on Next.js fetches. Drupal can use this to resolve the appropriate site content .

  • Drupal modules: Modules like Domain Access or NodeHive allow associating content with "spaces" or "domains", enabling clean content separation .

This setup means one Drupal instance supports multiple Next.js sites, each with its own look and URL, yet sharing editorial workflows.

3. Headless Drupal 11: Content Management & API

Key features in Drupal 11:

  • JSON:API in core: Standardized endpoints for content, relationships, filters, pagination.

  • Support for GraphQL, OAuth2/JWT, localization, Paragraphs, Layout Builder, and media—all accessible via API .

To enable layout-driven frontends:

  • Use the JSON:API Layout Builder Include module, along with patches that expose layout and inline block configuration via JSON .

Frontend layout is then driven by real, structured JSON content, not hardcoded templates.

4. Next.js Frontend: Multi‑Site & MACH Principles

Setup & Routing

Start with a Next.js project (e.g. create-next-app), integrate via next-drupal:

  • Set .env.local:

     
    NEXT_PUBLIC_DRUPAL_BASE_URL=https://cms.example.com SITE_ID=siteA

  • Use catch-all routing ([...slug].tsx or app/…/page.tsx) to dynamically fetch correct paths via Next.js getStaticProps or getServerSideProps .

Multi‑Site config

Implement runtime config loading:

  • Store site-specific metadata (name, logo, SEO, routes) in separate config files per site.

  • Merge defaults via next.config.js or publicRuntimeConfig, enabling a unified codebase for multiple frontends .

Preview Mode & Content Updates

  • Use Next.js preview features. Drupal triggers revalidation via webhooks to Next.js using res.revalidate()—ideal for ISR or scheduled rebuilds .

  • Draft content previews via modules like Decoupled Preview (from Next.js for Drupal), using embedded iframes within Drupal .

Performance & Scaling

  • Utilize Next.js’s SSR, SSG and ISR—building only modified pages.

  • Layer Vercel or CDN edge caching on top.

  • Host Next.js via Docker or managed platform for elasticity.

  • Drupal backend uses Redis or Memcached to optimize API calls .

5. TEAM AUTONOMY & WORKFLOW

  • Editorial autonomy: Drupal’s interface (Paragraphs, Layout Builder) remains editor-friendly .

  • Developer parallelism: Frontend and backend teams work concurrently, adhering to API contracts.

  • Deployment independence: CI/CD pipelines allow Next.js and Drupal to deploy separately.

6. Pitfalls & Considerations

  • Complex previews: Getting real-time Drupal previews in Next.js needs careful setup.

  • Performance costs: Multiple JSON:API calls per page load can strain backend—optimize via JSON:API Extras, GraphQL, caching .

  • Editor experience: Editors may need training in preview workflows across systems.

  • Tech management: Maintaining two stacks (Node.js + PHP/Drupal) increases operational overhead .

7. Real‑World Examples

  • Job boards: One Drupal backend with GraphQL powering multiple Next.js microsites—using custom HTTP headers for site logic .

  • High‑traffic content sites: Decoupled Drupal + Next.js platforms serving millions of hits/week—ISR with webhooks scaled via Varnish and Redis .

  • Component‑driven builds: Agencies like Altudo use TypeScript, JSON:API, JWT auth, and Next.js components for B2B enterprise sites .

🎯 Conclusion

Building a scalable, multi-site platform with Headless Drupal 11 and Next.js, aligned with MACH principles, delivers:

  • Unified editorial workflows with layout-dynamic capabilities

  • Multiple independently deployed frontends from a single content backend

  • Performance, scalability & flexibility through modern infrastructure

  • Team alignment with clearly defined API-driven roles

If you’re operating multiple brands, geolocations, or microsites—while prioritizing modern UX, editorial control, and developer velocity—this stack is a stellar fit. Ready to build your MACH multi-site platform? Let’s connect—I’d be happy to help with architecture specifics, CI/CD setup, or demo code.

Tags
Drupal
Drupal 11