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
Das Problem mit No-Code-Plattformen
| Problem | Webflow / Framer | Next.js |
|---|---|---|
| Performance | Größere Bundles, langsamerer TTFB | Optimierte Ausgabe, automatisches Code-Splitting |
| SEO-Kontrolle | Begrenzte Meta-Tags, grundlegende strukturierte Daten | Volle Kontrolle über den Head, Schema.org, Sitemap |
| Geo-Optimierung | Nativ nicht möglich | Middleware für Geo-Routing, integriertes i18n |
| Skalierbarkeit | Plattformgrenzen (CMS-Elemente, Bandbreite) | Unbegrenzte Skalierbarkeit |
| Vendor Lock-in | Export = Chaos | Ihr eigener Code, jederzeit portierbar |
| Eigene Logik | Sehr begrenzt | Volle Programmierfreiheit |
| KI-Sichtbarkeit (AEO) | Begrenzte Kontrolle über strukturierte Daten | Volle 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)
| Metrik | Webflow (Standard) | Framer (Veröffentlicht) | Next.js SSG (Vercel) |
|---|---|---|---|
| Median-TTFB | 400-800ms | 200-600ms | ~50-80ms |
| P95 TTFB | 800-1.400ms | 600-1.100ms | ~80-120ms |
| First Contentful Paint | 1,5-2,5s | 1,2-2,0s | ~0,5-0,8s |
| Largest Contentful Paint | 2,5-4,0s | 2,0-3,5s | ~0,8-1,3s |
| Total Blocking Time | 200-400ms | 150-300ms | ~10-30ms |
| HTML-Größe (gzipped) | 60-100KB | 80-130KB | ~8-15KB |
| JS Bundle-Größe | 250-400KB | 350-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
| Feature | Webflow | Framer | Next.js |
|---|---|---|---|
| Visueller Editor | Ja | Ja | Nein (aber CMS UI verfügbar) |
| Geobasiertes Routing | Nein | Nein | Ja (Edge Middleware) |
| i18n / Mehrsprachigkeit | Eingeschränkt (Lokalisierung seit 2023 verfügbar, aber eingeschränkt) | Eingeschränkt | Ja (integriert über next-intl) |
| Benutzerdefinierte strukturierte Daten | Grundlegend (manuell pro Seite) | Kein benutzerdefiniertes Markup | Volle Kontrolle (JSON-LD pro Route) |
| API Endpoints | Nein | Nein | Ja |
| Edge Computing | Nein | Nein | Ja |
| A/B-Testing | Begrenzt | Begrenzt | Ja (Edge Middleware) |
| Beliebiges Headless CMS | Begrenzt | Begrenzt | Ja (beliebiges CMS) |
| Git-basierter Workflow | Nein | Nein | Ja |
| CI/CD-Pipeline | Nein | Nein | Ja |
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
| Crawler | Betreiber | Verhalten | JS-Rendering? |
|---|---|---|---|
| GPTBot | OpenAI | Crawlt HTML für Trainingsdaten und ChatGPT-Zitate. Respektiert robots.txt. | Nein. Liest nur rohes HTML |
| PerplexityBot | Perplexity AI | Indexiert Seiten für Echtzeit-Suchantworten. Folgt Links aggressiv. | Begrenzt. Bevorzugt SSR |
| Google-Extended | Speist Gemini/KI-Übersichten. Getrennt von Googlebot. | Nein. Getrennt von der Rendering-Pipeline | |
| ClaudeBot | Anthropic | Crawlt für Claudes Wissen. Respektiert robots.txt. | Nein. Nur HTML |
| Applebot-Extended | Apple | Speist 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.
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/
├── 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)
└── ... 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)
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
| CMS | Typ | Preis | Am besten geeignet für | Claude Code kompatibel? |
|---|---|---|---|---|
| Keystatic | Git-basiert | Kostenlos | Dateibasierte Inhalte, volle Git-Kontrolle, keine externen Abhängigkeiten | Ausgezeichnet (liest/schreibt Dateien direkt) |
| Sanity | Headless API | Kostenlos bis zu 20 GB | Flexible Schemata, Echtzeit-Bearbeitung, Medienbibliothek | Gut (via API) |
| Contentful | Headless API | Kostenlos bis zu 25.000 Datensätze | Enterprise, Multi-Channel-Bereitstellung | Mittelmäßig (API-basiert) |
| Strapi | Selbst gehostet | Open Source | Volle Kontrolle, eigene Infrastruktur | Gut (lokale API) |
| Payload CMS | Selbst gehostet | Open Source | Next.js nativ, TypeScript-first | Gut (lokale API) |
| MDX/Markdown | Dateibasiert | Kostenlos | Blogs, Dokumentationen, technische Inhalte | Exzellent (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
// 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
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
{
"@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.
{
"@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
{
"@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.
{
"@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
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." 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." > "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.
# 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
| Aufgabe | Webflow/Framer | Next.js + Claude Code |
|---|---|---|
| Neue Seite | 2-4 Stunden | 10-30 Minuten |
| Designänderung | 30-60 Minuten | 5-15 Minuten |
| Neue Sprache | Tage | 30-60 Minuten |
| SEO-Optimierung | Manuell pro Seite | Automatisiert |
| Strukturierte Daten | Manuell/unmöglich | Automatisiert |
Empfohlener Tech Stack
Minimal umsetzbarer Stack
Next.js 15 (App Router)
TypeScript
Tailwind CSS v4
Keystatic (kostenlos, git-basiert) oder MDX
Vercel (Free-Tier)
Vercel Analytics
Claude Code
Vollständiger Produktions-Stack
Next.js 15 (App Router)
TypeScript
Tailwind CSS v4
shadcn/ui (Radix Primitives)
Sanity v3 oder Keystatic
Vercel Pro
Vercel Edge Network (automatisch)
Vercel Analytics + PostHog
Resend
React Hook Form + Zod-Validierung
NextAuth.js / Clerk (bei Bedarf)
Sentry
next-sitemap + JSON-LD (integriert)
next-intl
next/image + CMS Bild-Pipeline
Claude Code
GitHub -> Vercel (automatisch)
Migration Playbook
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
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)
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
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.
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
Phase 6 - Tests & Launch
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
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
| Funktion | Webflow / Framer | Next.js + CMS + Claude Code |
|---|---|---|
| Neue Blogseite | 30-60 Min. (manuelle CMS-Eingabe) | ~10 Min. (Claude Code + Überprüfung) |
| Schema markup | Manuell, fehleranfällig | Automatisch, vorlagenbasiert |
| SSR / SSG | Grundlegend (Framer: SSG, Webflow: serverseitig gerendert, aber keine Kontrolle pro Route) | Volle Kontrolle - statisch, SSR oder ISR pro Route |
| KI-Crawler-Kompatibilität | Grundlegender Inhalt crawlbar, dynamische Elemente werden übersehen | Vollständig (vorgerendertes HTML, vollständiges Schema) |
| Internationalisierung | Webflow Lokalisierung (begrenzt), Framer (Workaround) | Natives, sauberes Routing via next-intl |
| Massen-Content-Produktion | Stunden pro Batch (manuell) | Minuten pro Batch (Claude Code + Überprüfung) |
| Versionskontrolle | Keine oder begrenzt | Git -- jede Änderung verfolgt |
| CMS-Kosten | $20-50/Monat | $0 (Git-basiert) oder $0-99/Monat (headless) |
| Herstellerbindung | Ja (plattformabhängig) | Nein (Open Source, portabel) |
| Geo-basiertes Routing | Nicht möglich | Integriert (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.
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.