Skip to content
Technischer Leitfaden GEO Migration

Wechsel von Webflow / Framer zu Next.js: GEO-Optimiert

Warum der Wechsel wichtig ist, wie Sie das CMS einrichten und es mit Claude Code verbinden, um in wenigen Minuten neue Seiten zu erstellen. Ein vollständiger Migrationsleitfaden für die Sichtbarkeit in der KI-Suche.

No-Code (Webflow / Framer)

Next.js

400-800ms
TTFB
~50-80ms
TTFB (SSG)
Begrenzt
Schema Control
Vollständig
Schema Control

Das Problem mit No-Code-Plattformen

ProblemWebflow / FramerNext.js
PerformanceGrößere Bundles, langsamerer TTFBOptimierte Ausgabe, automatisches Code-Splitting
SEO-KontrolleBegrenzte Meta-Tags, grundlegende strukturierte DatenVolle Kontrolle über den Head, Schema.org, Sitemap
Geo-OptimierungNativ nicht möglichMiddleware für Geo-Routing, integriertes i18n
SkalierbarkeitPlattformgrenzen (CMS-Elemente, Bandbreite)Unbegrenzte Skalierbarkeit
Vendor Lock-inExport = ChaosIhr eigener Code, jederzeit portierbar
Eigene LogikSehr begrenztVolle Programmierfreiheit
KI-Sichtbarkeit (AEO)Begrenzte Kontrolle über strukturierte DatenVolle Schema.org-Kontrolle, API-Endpunkte für KI-Agenten

Webflow liefert serverseitig gerendertes HTML und Framer rendert veröffentlichte Seiten vor (SSG). Grundlegende Inhalte sind crawlbar. Die oben genannten Einschränkungen gelten für dynamische Elemente, granulare Rendering-Kontrolle und erweiterte Anpassungen, die bei zunehmender Skalierung kritisch werden.

Was ist Next.js?

Next.js ist ein React-basiertes Full-Stack-Framework von Vercel. Es kombiniert:

Serverseitiges Rendering (SSR)

Seiten, die auf dem Server gerendert werden, für schnellere Ladezeiten und besseres SEO

Statische Seitengenerierung (SSG)

Seiten, die zur Build-Zeit generiert werden, für maximale Performance

Incremental Static Regeneration (ISR)

Statische Seiten, die im Hintergrund ohne erneuten Deploy aktualisiert werden

App Router

Dateibasiertes Routing mit React Server Components

API Routes

Backend-Logik im selben Projekt

Edge Runtime

Code läuft auf Edge-Servern weltweit

Welche Rolle spielt Figma?

Figma ist ein Design-Tool, kein Website-Builder. Der Workflow ist:

Figma (Design) -> Next.js (Code) -> Vercel (Hosting)

Figma bleibt als die „Source-of-Truth“ für das Design im Stack. Die Übergabe an Next.js erfolgt über die Implementierung durch Entwickler oder KI-gestützte Tools wie Claude Code.

Echte Performance-Benchmarks

Quellen

Daten basierend auf öffentlich verfügbaren Benchmarks von:

  • WebPageTest
  • web.dev Core Web Vitals-Dokumentation
  • DebugBear: Webflow Performance (2024)
  • Calibre: CWV Benchmarks (2024)

TTFB und Core Web Vitals (Typische Bereiche)

MetrikWebflow (Standard)Framer (Veröffentlicht)Next.js SSG (Vercel)
Median-TTFB400-800ms200-600ms~50-80ms
P95 TTFB800-1.400ms600-1.100ms~80-120ms
First Contentful Paint1,5-2,5s1,2-2,0s~0,5-0,8s
Largest Contentful Paint2,5-4,0s2,0-3,5s~0,8-1,3s
Total Blocking Time200-400ms150-300ms~10-30ms
HTML-Größe (gzipped)60-100KB80-130KB~8-15KB
JS Bundle-Größe250-400KB350-500KB~30-60KB (auf Seitenebene)

Methodology: Die Bereiche spiegeln typische Produktionsbereitstellungen auf Standard-Tiers wider. Webflow Enterprise mit Cloudflare CDN kann eine TTFB von ~200ms erreichen. Framer SSG-Seiten performen besser als dynamische Framer-Seiten. Next.js-Werte gehen von einem Vercel Edge Network mit SSG aus. ISR- und SSR-Routen werden eine höhere TTFB aufweisen. Testen Sie Ihre eigenen Seiten unter webpagetest.org oder PageSpeed Insights.

Feature-Matrix

FeatureWebflowFramerNext.js
Visueller EditorJaJaNein (aber CMS UI verfügbar)
Geobasiertes RoutingNeinNeinJa (Edge Middleware)
i18n / MehrsprachigkeitEingeschränkt (Lokalisierung seit 2023 verfügbar, aber eingeschränkt)EingeschränktJa (integriert über next-intl)
Benutzerdefinierte strukturierte DatenGrundlegend (manuell pro Seite)Kein benutzerdefiniertes MarkupVolle Kontrolle (JSON-LD pro Route)
API EndpointsNeinNeinJa
Edge ComputingNeinNeinJa
A/B-TestingBegrenztBegrenztJa (Edge Middleware)
Beliebiges Headless CMSBegrenztBegrenztJa (beliebiges CMS)
Git-basierter WorkflowNeinNeinJa
CI/CD-PipelineNeinNeinJa

Verhalten von KI-Crawlern

GPTBot, PerplexityBot und Google-Extended crawlen Websites anders als herkömmliche Such-Bots. Sie bevorzugen sauberes, serverseitig gerendertes HTML und überspringen Inhalte, die von der JavaScript-Ausführung oder Benutzerinteraktion abhängen.

Wichtige KI-Crawler

CrawlerBetreiberVerhaltenJS-Rendering?
GPTBotOpenAICrawlt HTML für Trainingsdaten und ChatGPT-Zitate. Respektiert robots.txt.Nein. Liest nur rohes HTML
PerplexityBotPerplexity AIIndexiert Seiten für Echtzeit-Suchantworten. Folgt Links aggressiv.Begrenzt. Bevorzugt SSR
Google-ExtendedGoogleSpeist Gemini/KI-Übersichten. Getrennt von Googlebot.Nein. Getrennt von der Rendering-Pipeline
ClaudeBotAnthropicCrawlt für Claudes Wissen. Respektiert robots.txt.Nein. Nur HTML
Applebot-ExtendedAppleSpeist Apple Intelligence-Funktionen.Nein. Nur Roh-HTML

Was AI-Crawler auf No-Code-Seiten übersehen können

Grundlegender statischer Inhalt auf Webflow-/Framer-Seiten ist crawlbar. Die folgenden Probleme betreffen dynamische oder interaktive Elemente:

Dynamisch geladener Inhalt

Inhalt, der über JS nach dem anfänglichen Seitenaufbau geladen wird (gefilterte Listen, paginierte Abschnitte), ist möglicherweise nicht sichtbar

Interaktionsgesteuerter Inhalt

Tabs, Akkordeons und Karussells, die Klicks erfordern, um Inhalte anzuzeigen, werden von AI-Crawlern nie erweitert

Lazy-geladene Abschnitte

Inhalt hinter Intersection Observers oder Scroll-Triggern wird für Crawler, die nicht scrollen, nie geladen

iFrame-Einbettungen

Eingebettete Formulare, Videos und Widgets von Drittanbietern sind für AI-Crawler völlig undurchsichtig

Next.js SSG-Lösung:

Jede Seite wird zur Build-Zeit als vollständiges HTML vorgerendert. AI-Crawler erhalten den vollständigen Inhalt, strukturierte Daten und semantisches Markup bei der allerersten Anfrage. Keine JavaScript-Ausführung erforderlich.

Geo-Optimierung mit Next.js

Was ist Geo-Optimierung?

Anpassung von Inhalten und Erlebnissen basierend auf dem Standort des Benutzers:

Sprache

Automatisch erkennen und wechseln

Währung

Preise lokalisieren

Inhalt

Regionale Fallstudien, Testimonials anzeigen

Compliance

DSGVO für die EU, CCPA für die USA

CDN-Routing

Inhalte vom nächstgelegenen Edge-Server bereitstellen

Implementierung mit Next.js Middleware

Hinweis: SCAILE verwendet next-intl Middleware mit URL-Praefix-Routing (/en/, /de/). Das folgende Beispiel zeigt eine optionale Erweiterung fuer geobasierte Auto-Weiterleitung.

middleware.ts (optional: geo-aware locale detection)
import { NextRequest, NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US'
  const locale = country === 'DE' || country === 'AT' || country === 'CH'
    ? 'de' : 'en'

  if (!request.nextUrl.pathname.startsWith(`/${locale}`)) {
    return NextResponse.redirect(
      new URL(`/${locale}${request.nextUrl.pathname}`, request.url)
    )
  }
}

i18n URL-Struktur

scaile.tech/services          -> English (default)
scaile.tech/de/services       -> German

-> Separate meta tags, Schema, OG tags per language
-> Hreflang tags auto-generated
-> Shared components, locale-specific content

Edge CDN-Bereitstellung

Latenz: < 50ms weltweit (vs. 200-500ms Single-Origin)

CMS-Architektur

Warum Headless CMS?

Ein Headless CMS liefert Inhalte über eine API. Das Frontend (Next.js) ist vollständig entkoppelt. Das bedeutet, Sie können das CMS austauschen, ohne das Frontend zu berühren, und umgekehrt.

Wahl Ihres CMS

Keystatic / MDX

Verwenden Sie Keystatic oder MDX, wenn Sie möchten, dass Claude Code Inhaltsdateien direkt in Git erstellt und bearbeitet (schnellster Workflow für die Inhaltsproduktion).

Sanity

Verwenden Sie Sanity, wenn Sie eine visuelle Bearbeitungsoberfläche für nicht-technische Teammitglieder, Echtzeit-Kollaboration oder eine Medienbibliothek benötigen.

Payload CMS

Verwenden Sie Payload, wenn Sie alles selbst gehostet mit vollständiger TypeScript-Integration wünschen.

Beispiel für Inhaltsstruktur (Git-basiert)

content/ directory structure
content/
├── blog/                    # Blogartikel (Markdoc/MDX)
│   ├── my-article/
│   │   └── index.mdoc
│   └── ...
├── case-studies/            # Fallstudien (YAML)
│   ├── client-name/
│   │   └── index.yaml
│   └── ...
├── team/                    # Teamprofile (YAML)
│   ├── first-last/
│   │   └── index.yaml
└── jobs/                    # Stellenangebote (YAML)
    └── ...
keystatic.config.ts
blog: collection({
  label: 'Blog Posts',
  slugField: 'title',
  path: 'content/blog/*/',
  format: { contentField: 'content' },
  schema: {
    title: fields.slug({ name: { label: 'Title' } }),
    date: fields.date({ label: 'Date' }),
    category: fields.select({
      label: 'Category',
      options: [
        { label: 'Go-To-Market', value: 'gtm' },
        { label: 'AI in Sales', value: 'ai-sales' },
        { label: 'B2B SEO', value: 'b2b-seo' },
      ],
    }),
    excerpt: fields.text({
      label: 'Excerpt', multiline: true
    }),
    content: fields.markdoc({ label: 'Content' }),
  },
})

Beispiel für Inhaltsstruktur (Sanity)

sanity/schemas/blogPost.ts
export default defineType({
  name: 'blogPost',
  title: 'Blog Post',
  type: 'document',
  fields: [
    defineField({
      name: 'title',
      title: 'Title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      options: { source: 'title' },
    }),
    defineField({
      name: 'category',
      title: 'Category',
      type: 'string',
      options: {
        list: ['gtm', 'ai-sales', 'b2b-seo'],
      },
    }),
    defineField({
      name: 'content',
      title: 'Content',
      type: 'blockContent',
    }),
  ],
})

CMS-Vergleich für Next.js

CMSTypPreisAm besten geeignet fürClaude Code kompatibel?
KeystaticGit-basiertKostenlosDateibasierte Inhalte, volle Git-Kontrolle, keine externen AbhängigkeitenAusgezeichnet (liest/schreibt Dateien direkt)
SanityHeadless APIKostenlos bis zu 20 GBFlexible Schemata, Echtzeit-Bearbeitung, MedienbibliothekGut (via API)
ContentfulHeadless APIKostenlos bis zu 25.000 DatensätzeEnterprise, Multi-Channel-BereitstellungMittelmäßig (API-basiert)
StrapiSelbst gehostetOpen SourceVolle Kontrolle, eigene InfrastrukturGut (lokale API)
Payload CMSSelbst gehostetOpen SourceNext.js nativ, TypeScript-firstGut (lokale API)
MDX/MarkdownDateibasiertKostenlosBlogs, Dokumentationen, technische InhalteExzellent (direkte Dateibearbeitung)

GEO-Optimierungsfunktionen

Next.js ermöglicht automatische Schema.org-Auszeichnung, granulare Rendering-Kontrolle, vollständige i18n-Unterstützung und programmatische Sitemaps. Diese Funktionen sind auf No-Code-Plattformen entweder begrenzt oder erfordern Workarounds.

Server-Side Rendering für KI-Crawler

Next.js: Page is fully rendered at crawl time
// Every page is pre-rendered, no client JS needed
export default async function BlogPost({ params }) {
  const post = await getBlogPost(params.slug) // Build time
  return <Article>{post.content}</Article>    // Complete HTML
}

// All pages pre-rendered at build
export async function generateStaticParams() {
  const posts = await getAllBlogPosts()
  return posts.map(post => ({ slug: post.slug }))
}

Internationalisierung

Separate Meta-Tags, Schema, OG-Tags pro Sprache
Hreflang-Tags automatisch generiert
Geteilte Komponenten, Locale-spezifischer Inhalt

Automatische Sitemap, RSS, Feeds

// Auto-generated from content files:
/sitemap.xml     -> All pages, all locales
/feed.xml        -> RSS for blog (EN)
/feed-de.xml     -> RSS for blog (DE)

Schema.org im Detail

Strukturierte Daten sind die Sprache, die KI-Modelle verwenden, um Ihre Inhalte zu verstehen. Unten finden Sie produktionsreife Schema.org-Vorlagen.

Artikel-Schema

Article Schema Template
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Concise summary for AI snippets",
  "datePublished": "2025-01-15T08:00:00+01:00",
  "dateModified": "2025-01-20T10:30:00+01:00",
  "author": {
    "@type": "Person",
    "name": "Author Name",
    "url": "https://yoursite.com/team/author"
  },
  "publisher": {
    "@type": "Organization",
    "name": "SCAILE"
  }
}

FAQ-Schema

Entscheidend für KI-Zitate. FAQ-Schema fließt direkt in ChatGPT-Antworten und Google KI-Übersichten ein.

FAQ Schema Template
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is AI Engine Optimization?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "AEO is the practice of optimizing content
         so AI models cite your website as a source."
      }
    }
  ]
}

Service-Schema

Service Schema Template
{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "AI Visibility Content Engine",
  "provider": {
    "@type": "Organization",
    "name": "SCAILE",
    "url": "https://www.scaile.tech"
  },
  "serviceType": "AI Search Optimization"
}

HowTo Schema

Perfekt für Anleitungen und Tutorials. KI-Modelle nutzen dies, um Schritt-für-Schritt-Antwortformate zu generieren.

HowTo Schema Template
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Migrate from Webflow to Next.js",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Audit Existing Content",
      "text": "Export all pages, document URL structure."
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Set Up Next.js + CMS",
      "text": "Initialize project, configure collections."
    }
  ]
}

Claude Code Integration

Da Next.js-Projekte Code- und Inhaltsdateien in einem Git-Repo sind, kann Claude Code alles direkt erstellen, bearbeiten und optimieren - und verwandelt es so in ein Zero-UI-Tool für die Inhaltsproduktion.

Workflow-Beispiele

Neuer Blog-Beitrag (~2 Minuten)

Sobald Ihre CLAUDE.md konfiguriert ist, erstellt Claude Code die Datei, füllt das frontmatter aus, schreibt strukturierten Inhalt, fügt einen FAQ-Bereich hinzu und platziert interne Links. Nach dem git push ist die Seite mit vollständigem Schema-Markup live.

> "Create a new blog post about AEO for SaaS companies.
>  Category: b2b-seo. Write 2,500 words with FAQ section."
Massen-Inhaltsproduktion

Claude Code erstellt alle 5 Dateien in einem Durchgang. In Webflow wäre dies ein halber Tag manueller CMS-Eingabe.

> "Create 5 blog posts for these keywords: [list].
>  Each 1,500+ words, category gtm, with FAQ section."
Bestehenden Inhalt bearbeiten
> "Update the case study: Add new metric -- +350% AI Citations"

Die CLAUDE.md-Datei (Projektkontext)

Eine CLAUDE.md-Datei im Projekt-Root gibt Claude Code permanenten Kontext zu Ihren Projektkonventionen.

CLAUDE.md (example - create this at your repo root)
# Content Creation Rules

## Blog Posts
- Always in content/blog/{slug}/index.mdoc
- Frontmatter: title, date, category, author, excerpt
- Minimum 1,500 words
- FAQ section at the end (auto-converts to Schema)
- Internal links to /services, /case-studies where relevant

## GEO Rules
- Every page needs a clear answer to a question
- First paragraph = Direct answer (for AI snippets)
- Schema markup is auto-generated from content structure

Zeitvergleich

AufgabeWebflow/FramerNext.js + Claude Code
Neue Seite2-4 Stunden10-30 Minuten
Designänderung30-60 Minuten5-15 Minuten
Neue SpracheTage30-60 Minuten
SEO-OptimierungManuell pro SeiteAutomatisiert
Strukturierte DatenManuell/unmöglichAutomatisiert

Empfohlener Tech Stack

Minimal umsetzbarer Stack

Framework

Next.js 15 (App Router)

Sprache

TypeScript

Styling

Tailwind CSS v4

CMS

Keystatic (kostenlos, git-basiert) oder MDX

Hosting

Vercel (Free-Tier)

Analytics

Vercel Analytics

Dev Tool

Claude Code

Vollständiger Produktions-Stack

Framework

Next.js 15 (App Router)

Sprache

TypeScript

Styling

Tailwind CSS v4

UI Library

shadcn/ui (Radix Primitives)

CMS

Sanity v3 oder Keystatic

Hosting

Vercel Pro

CDN

Vercel Edge Network (automatisch)

Analytics

Vercel Analytics + PostHog

Email

Resend

Formulare

React Hook Form + Zod-Validierung

Auth

NextAuth.js / Clerk (bei Bedarf)

Monitoring

Sentry

SEO

next-sitemap + JSON-LD (integriert)

i18n

next-intl

Bilder

next/image + CMS Bild-Pipeline

Dev Tool

Claude Code

CI/CD

GitHub -> Vercel (automatisch)

Migration Playbook

1

Phase 1 -- Audit

  • Alle bestehenden Seiten und Inhaltstypen auflisten
  • Inhalte exportieren (Webflow: CMS Export, Framer: manuelles Kopieren)
  • URL-Struktur für 301-Weiterleitungen dokumentieren
  • Schema Markup-Lücken identifizieren
  • Aktuelle Core Web Vitals benchmarken
2

Phase 2 -- Setup

npx create-next-app@latest my-site --typescript --tailwind --app
npm install @keystatic/core @keystatic/next
  • CMS-Sammlungen und Inhaltsschemata konfigurieren
  • i18n einrichten (falls mehrsprachig)
  • Basislayout erstellen (Header, Footer, Navigation)
3

Phase 3 -- Design System

  • Figma-Designs als Referenz verwenden
  • Tailwind mit Markenfarben, Schriftarten, Abständen konfigurieren
  • Basiskomponenten erstellen: Button, Card, Section, Typography
  • Claude Code kann Komponenten aus Figma-Screenshots generieren
4

Phase 4 -- Content Migration

Migrationsreihenfolge:

  • Startseite
  • Über uns / Team
  • Dienstleistungen
  • Blog (mit CMS)
  • Fallstudien (mit CMS)
  • Kontakt
  • Rechtliches (Impressum, Datenschutz)

Claude Code übernimmt ca. 80 % der Inhaltskonvertierung, wenn die exportierten Inhalte als Eingabe bereitgestellt werden. Eine menschliche Überprüfung ist für Genauigkeit und Markenstimme erforderlich.

5

Phase 5 - GEO-Optimierung

  • Schema.org-Vorlagen für jeden Inhaltstyp
  • FAQ-Schema-Automatisierung
  • Breadcrumb-Schema
  • OG-Tags und Meta pro Seite und Gebietsschema
  • Sitemap und RSS-Feeds
  • Strategie für interne Verlinkung
  • Middleware für Geo-Routing
6

Phase 6 - Tests & Launch

next.config.ts
redirects: async () => [
  {
    source: '/old-webflow-path',
    destination: '/new-path',
    permanent: true, // 301 redirect
  },
]
  • 301-Weiterleitungen für alle alten URLs
  • Lighthouse-Audit (Ziel: 90+)
  • Cross-Browser-Tests
  • Google Search Console aktualisieren
  • DNS-Migration
  • Überwachen: Crawl-Fehler, 404er, Schema-Validierung

Eine vorübergehende Ranking-Fluktuation (2-4 Wochen) ist bei jeder Migration normal, selbst bei perfekten 301-Weiterleitungen. Die meisten Websites erholen sich und verbessern sich innerhalb von 4-8 Wochen dank besserer TTFB und strukturierter Daten.

Migrations-Fallstudie

Illustratives Beispiel (fiktives Unternehmen)

B2B Analytics SaaS - Anonymisiertes Beispiel

Mittelstaendisches SaaS-Unternehmen mit 45 Seiten auf Webflow CMS. Ziel: zitierte Quelle fuer B2B-Analytics-Anfragen in ChatGPT und Perplexity werden.

Vorher (Webflow)

  • 0 KI-Zitationen pro Monat
  • TTFB: 820ms Durchschnitt
  • Keine strukturierten Daten (Schema.org)
  • Client-gerenderte CMS-Inhalte
  • 45 Seiten, 3 Sprachen (fehlerhaft)
  • Content-Produktion: 2 Posts/Monat
  • Kein Schema.org-Markup
  • Monatliche Kosten: 2.800 EUR

Nachher (Next.js, Woche 12)

  • 42 KI-Zitationen pro Monat
  • TTFB: 58ms Durchschnitt
  • Vollstaendiges Schema auf allen 85 Seiten
  • 100% server-gerendert (SSG)
  • 85 Seiten, 2 Sprachen (natives i18n)
  • Content-Produktion: 12 Posts/Monat
  • Vollstaendiges Schema.org auf allen Seiten
  • Monatliche Kosten: 35 EUR

Zeitlicher Ablauf

Woche 2

Migration abgeschlossen, live auf Next.js

Woche 6

Erste KI-Zitationen (8 gesamt)

Woche 12

42 monatliche KI-Zitationen, 85 Seiten

Vorher vs. Nachher

FunktionWebflow / FramerNext.js + CMS + Claude Code
Neue Blogseite30-60 Min. (manuelle CMS-Eingabe)~10 Min. (Claude Code + Überprüfung)
Schema markupManuell, fehleranfälligAutomatisch, vorlagenbasiert
SSR / SSGGrundlegend (Framer: SSG, Webflow: serverseitig gerendert, aber keine Kontrolle pro Route)Volle Kontrolle - statisch, SSR oder ISR pro Route
KI-Crawler-KompatibilitätGrundlegender Inhalt crawlbar, dynamische Elemente werden übersehenVollständig (vorgerendertes HTML, vollständiges Schema)
InternationalisierungWebflow Lokalisierung (begrenzt), Framer (Workaround)Natives, sauberes Routing via next-intl
Massen-Content-ProduktionStunden pro Batch (manuell)Minuten pro Batch (Claude Code + Überprüfung)
VersionskontrolleKeine oder begrenztGit -- jede Änderung verfolgt
CMS-Kosten$20-50/Monat$0 (Git-basiert) oder $0-99/Monat (headless)
HerstellerbindungJa (plattformabhängig)Nein (Open Source, portabel)
Geo-basiertes RoutingNicht möglichIntegriert (Edge Middleware)

Wer sollte wechseln?

Wechseln Sie jetzt, wenn:

  • KI-Sichtbarkeit (AEO/GEO) ein Geschäftsziel ist
  • Sie 20+ Seiten oder eine regelmäßige Content-Produktion haben
  • Mehrsprachige Unterstützung wird benötigt
  • Die Produktion großer Mengen an Inhalten ist geplant
  • Die Kontrolle über Schema-Markup ist wichtig
  • Sie möchten die Anbieterabhängigkeit reduzieren
  • Sie benötigen eine geobasierte Inhaltsbereitstellung

Bleiben Sie bei No-Code, wenn:

  • Reine Broschüren-Website (5 statische Seiten, selten aktualisiert)
  • Kein technisches Team verfügbar und kein Claude Code-Zugang
  • Inhalte seltener als einmal pro Monat geändert werden
  • Die Geschwindigkeit der Design-Iteration wichtiger ist als die Performance

TL;DR

Webflow und Framer sind Design-Tools. Next.js + Headless CMS + Claude Code ist eine Content-Produktions-Engine.

Der Wechsel dauert ca. 2 Wochen. Danach: neue Seiten in Minuten statt Stunden, volle GEO/AEO-Kontrolle, niedrigere Plattformkosten und ein System, das mit KI-gestützter Inhaltsproduktion skaliert.

~2 Wochen Migration 10x Content-Geschwindigkeit 0 EUR CMS-Kosten Volle Schema-Kontrolle

FAQ

Muss ich programmieren können, um diesen Stack zu nutzen?

Für die initiale Einrichtung (ca. 2 Wochen) benötigen Sie einen Entwickler. Danach erfolgt die laufende Inhaltsproduktion weitgehend prompt-gesteuert über Claude Code, und nicht-technische Teammitglieder können den visuellen CMS-Editor (Keystatic oder Sanity Studio) verwenden.

Werde ich meine Google-Rankings während der Migration verlieren?

Eine vorübergehende Ranking-Fluktuation (2-4 Wochen) ist bei jeder Website-Migration normal, selbst bei perfekten 301-Weiterleitungen. Eine korrekte Weiterleitungskartierung, Canonical Tags und die Überwachung der Search Console minimieren die Auswirkungen. Die meisten Websites erholen sich und verbessern sich innerhalb von 4-8 Wochen dank besserer TTFB und strukturierter Daten.

Kann ich weiterhin einen visuellen Editor verwenden?

Ja. Sowohl Keystatic als auch Sanity bieten visuelle Admin-UIs. Sie erhalten das Beste aus beiden Welten: einen visuellen Editor für nicht-technische Benutzer und direkten Datei-/API-Zugriff für Entwickler und Claude Code.

Wie verhält sich dies im Vergleich zu WordPress?

WordPress kann ähnliche Ergebnisse erzielen, erfordert jedoch umfangreiche Plugins (Yoast, WP Rocket, WPML), einen Managed Host und laufende Wartungs-/Sicherheitsupdates. Der Next.js-Stack ist von Haus aus schneller, hat geringere laufende Kosten und keinerlei Plugin-Abhängigkeiten.

Was ist mit E-Commerce?

Next.js funktioniert mit Headless-Commerce-Plattformen (Shopify Storefront API, Saleor, Medusa). Sie erhalten die volle Schema-Kontrolle über Produkt-, Angebots- und Bewertungs-Markup - entscheidend für KI-Shopping-Ergebnisse.

Wie messen Sie KI-Zitate?

Tools wie Otterly.ai, Profound und die manuelle Überwachung von ChatGPT-/Perplexity-Antworten für Ihre Marken-Keywords. Dies ist ein aufstrebender Bereich - noch deckt kein einzelnes Tool alles ab. Verfolgen Sie Zitate wöchentlich und korrelieren Sie diese mit Inhaltsänderungen.

Warum Keystatic statt Sanity (oder umgekehrt)?

Keystatic ist kostenlos und git-basiert - Claude Code kann Inhaltsdateien direkt erstellen/bearbeiten, was es zur schnellsten Lösung für die KI-gestützte Inhaltsproduktion macht. Sanity bietet einen reichhaltigeren visuellen Editor, Echtzeit-Kollaboration und eine Medienbibliothek - besser für Teams mit nicht-technischen Content-Editoren. Beide funktionieren gut mit Next.js.