Lunover Engineering Notes

So strukturierst du einen Webagentur-Codebase fuer Skalierung

Ein skalierbares Architektur-Pattern fuer Agentur-Delivery: Content-Grenzen, wiederverwendbare Sections, deterministische Routes, Metadata-Helper und Regeln fuer interne Links.

February 10, 2025By LunoverWork with us

So strukturierst du einen Webagentur-Codebase fuer Skalierung

Wenn jede neue Seite eine neue Page-Komponente braucht, wird der Codebase einer Agentur zum Engpass. Die Loesung ist nicht "mehr Components". Die Loesung ist ein striktes Content-Modell, vorhersehbares Routing und wiederverwendbare Sections, die SEO-sicher bleiben, waehrend die Website waechst.

Wofuer du optimierst

  • schnell shippen ohne Layout-Drift
  • weniger Regressionen in Navigation/SEO
  • planbares Publishing von Content
  • leichtes internes Verlinken zwischen Artikeln und Services

1. Content von Rendering trennen

Eine einfache Regel, die skaliert: Content lebt in MDX (oder einem CMS), Rendering lebt in Components. Content sollte enthalten:
  • title, description, slug
  • optionales publish date und image
  • seiten-spezifische Daten (FAQs, Testimonials, Feature-Bullets)
Rendering sollte enthalten:
  • Hero-Layout
  • Section-Layouts
  • Typografie und Spacing
  • wiederverwendbare CTA-Patterns
So vermeidest du die "copy/paste page"-Falle.

2. Dein Section-System standardisieren

Definiere ein kleines Set an Sections und reuse sie ueberall:
  • Hero
  • Services-Grid
  • Process-Steps
  • FAQ
  • CTA
  • Testimonials
Mache Sections datengetrieben, damit Content-Aenderungen keine Layout-Aenderungen erzwingen.

3. Routing deterministisch halten

Vorhersehbare Route-Familien erlauben dir, SEO sicher zu automatisieren:
  • /services/[slug]
  • /blog/[slug]
  • /legal/[slug]
Wenn Routes konsistent sind, kannst du generieren:
  • Canonical-URLs
  • alternates/hreflang
  • Sitemap-Eintraege
  • Schema-Output
ohne Custom-Code pro Route.

4. Metadata-Generierung zentralisieren

Metadata ist kein Copywriting-Detail. Es ist Infrastruktur. Packe Canonical/hreflang/robots-Logik in einen Helper und reuse ihn ueber alle Routes. Wenn deine Website mehrsprachig ist, muessen Alternates aus realer Content-Verfuegbarkeit kommen, nicht aus String-Substitution. Siehe: Next.js 16 SEO Checklist for Production Interne Links verbinden technische Autoritaet mit kommerzieller Intent. Eine Regel, die fuer Agentur-Websites gut funktioniert:
  • jeder technische Post verlinkt auf eine passende Service-Seite
  • jede Service-Seite verlinkt auf einen passenden technischen Post
Starte mit diesen Ankern: Dann baue Cluster:
  • SEO-Implementierungs-Posts -> /services/seo
  • Performance/Next.js-Posts -> /services/web-development

6. Empfohlenes Folder-Layout

Beispiel (App Router + MDX):
src/
  app/
    [locale]/
      (pages)/
        blog/
          [slug]/page.tsx
        services/
          [slug]/page.tsx
  lib/
    seo-helpers.ts
    mdx-helpers.ts
  markdown/
    en/
      pages/
      blog/
Das Ziel ist ein konsistenter Pfad von:
  • content -> route -> metadata -> schema -> sitemap

7. Publishing-Checklist (nicht verhandelbar)

Bevor eine Seite live geht, pruefe:
  • Frontmatter ist vorhanden (title, description, slug)
  • die Seite hat eine klare primaere Intent
  • Canonical-URL ist korrekt
  • interne Links existieren (zu Services und verwandten Artikeln)