Next.js-Adapter mit KI-Setup

Der Adapter ist ein offenes npm-Paket für den Next.js App Router.

Er übernimmt Routing, Rendering, Caching und SEO – du schreibst nur noch die Komponenten für deine Blocks.

• Blocks als React-Komponenten – jeder Block in Flyo entspricht einer Komponente, die du in der Konfiguration registrierst. Verschachtelte Blocks über Slots in beliebiger Tiefe, serverseitig gerendert.
• Live-Editing auf der echten Seite – Redaktorinnen klicken im Vorschaufenster direkt auf ein Element und bearbeiten es im Flyo-Editor.
• Draft-Links – ablaufende Vorschaulinks für unveröffentlichte Inhalte, mit Hinweisbanner und garantiert ohne CDN-Caching.
• Caching-Proxy – setzt die Cache-Header für CDN und Browser, TTLs frei konfigurierbar, im Bearbeitungsmodus automatisch deaktiviert.
• SEO ab Werk – Meta-Tags, Open Graph, selbstreferenzierende Canonicals, hreflang, strukturierte Daten nach schema.org ↗ und eine Sitemap mit echtem Änderungsdatum statt Zeitstempel der letzten Generierung.
• Bilder über das Flyo-CDN – WebP-Konvertierung, Grössenanpassung und echter Zuschnitt auf den gesetzten Fokuspunkt, direkt über next/image.
• Mehrsprachigkeit – Locale-Erkennung aus der URL, lokalisierte Navigation, fertige Sprachumschalter-Komponente, ohne zusätzliche Routen.
• Entity-Detailseiten – frei wählbare Routenstruktur über ein einfaches Resolver-Pattern, mit automatischem Caching.
• Typsicherheit aus dem Schema – ein Befehl generiert aus der OpenAPI-Definition deines Projekts TypeScript-Typen für sämtliche Blocks, Entities und Container.

Und das Setup macht die KI

Dieselbe Integration ist als maschinenlesbarer Arbeitsauftrag dokumentiert. Im Flyo-Backend wählst du dein Framework und kopierst den generierten Prompt in Claude Code, Cursor oder Copilot – Development-Token und die Container-Kennungen deines Projekts sind bereits eingesetzt. Der Assistent liest die Anleitung, installiert das Paket und legt Konfiguration, Proxy, Layout, Routen und Typen an. Ein mitgelieferter Skill baut danach aus einem Design oder einer bestehenden Komponente einen fertigen Block.

• Die Fähigkeiten sind der Punkt, nicht die Geschwindigkeit. Live-Editing, Draft-Vorschau, Fokuspunkt-Zuschnitt, korrekte Cache-Header, ehrliche Sitemap-Zeitstempel: lauter Details, die eigene Anbindungen typischerweise auslassen oder falsch machen – und die man erst Monate später bemerkt.
• Live-Editing trotz Headless. Der klassische Zielkonflikt entfällt. Die Redaktion arbeitet visuell auf der laufenden Seite, das Frontend bleibt vollständig entkoppelt.
• Keine Brückenschicht. Weil Flyo OpenAPI-first ist, entstehen die Typen aus dem Schema deines eigenen Projekts. Ein umbenanntes Feld bricht den Build, nicht die Produktion.
• Volle Freiheit im Frontend. Kein Theme-System, keine Template-Sprache, keine Vorgaben zu Styling oder Hosting. Normales React, dein Stack, dein Deployment.
• Die KI arbeitet mit Fakten statt mit Trainingswissen. Der Assistent liest eine versionierte Anleitung und ein Schema deines Projekts, statt eine Integration aus halb erinnerten Konventionen zu rekonstruieren. Das ist der Unterschied zwischen funktionierendem Code und plausibel aussehendem Code.
• Prüfbar statt magisch. Paket und Anleitung liegen offen auf GitHub, der Prompt ist lesbarer Text. Wer von Hand einrichten will, folgt derselben Dokumentation – die KI ist eine Abkürzung, keine Abhängigkeit.