Astro oder Next.js: Was sollten Sie 2026 für eine mit KI erstellte Website wählen?

Sie erstellen eine Website mit einem KI-Agenten, und er fragt: „Sollen wir Astro oder Next.js verwenden?“ Die Antwort bestimmt, wie viel Code der Agent schreiben wird, wo Sie die Website hosten und wie viel das Hosting kostet. Beide Frameworks sind kostenlos, beide werden aktiv weiterentwickelt, und der Agent kann mit beiden arbeiten. Die Frage ist, mit welchem Sie anschließend leben möchten.

Der vollständige Ablauf zum Erstellen einer Website mit Astro wird in einer separaten Anleitung beschrieben. Im Folgenden finden Sie einen ehrlichen Vergleich: wofür die einzelnen Frameworks konzipiert sind, welches für einen KI-Agenten einfacher ist, was das Hosting kostet und wie Sie Ihre Wahl anhand Ihres eigenen Projekts überprüfen können, bevor der Agent seine erste Datei schreibt. Versionen und Fakten entsprechen dem Stand vom 12. September 2026: An diesem Tag waren Astro 7.3.2 und Next.js 16.3.5 aktuell. Frameworks werden häufig aktualisiert; überprüfen Sie daher vor dem Erstellen erneut die Versionsnummern.

Ailoot-Referenzdokumentation: ailoot.ai/docs/.

Wann eignet sich Astro und wann Next.js für eine KI-Website?#

Die Empfehlungen sind in einer Tabelle zusammengefasst. Suchen Sie Ihre Aufgabe – die Antwort steht in der zweiten Spalte.

Sehen wir uns an, woher dieser Unterschied kommt.

Wofür sind Astro und Next.js konzipiert?#

Die Astro-Entwickler beschreiben das Framework in der Dokumentation ausdrücklich als Framework für inhaltsorientierte Websites: Blogs, Marketingseiten und Onlineshops. Webanwendungen – Admin-Dashboards, E-Mail, soziale Netzwerke und Editoren – ordnen sie dem Einsatzbereich anderer Frameworks zu. Hier ist ihr Wortlaut:

Next.js beschreibt sich anders:

Diese beiden Aussagen erklären fast alles Weitere. Eine Website, die „zeigt“ – ein Portfolio, Blog oder Katalog –, ist der Einsatzbereich von Astro. Eine Website, die „etwas tut“ – ein Konto, Dienst oder Kontrollpanel –, ist der Einsatzbereich von Next.js.

Wie ist eine Astro-Website aufgebaut?#

Die Entwickler nennen dies Inselarchitektur. Die Seite besteht aus statischem HTML, während interaktive Elemente als separate Inseln darauf „erscheinen“: Hier wird ein Anfrageformular aktiv, dort eine Fotogalerie. Alles andere ist eine gewöhnliche Seite ganz ohne JavaScript. In der Dokumentation steht es schlicht: „Zero JS, by default.“

Für Websitebetreiber bedeutet das drei Dinge:

• Geschwindigkeit. JavaScript wird standardmäßig nicht für Besucher geladen. Die endgültige Geschwindigkeit hängt weiterhin von Bildern, Schriftarten und Widgets von Drittanbietern ab, aber Sie fügen hier keinen schwergewichtigen Code hinzu.
• Einfachheit. Eine Astro-Seitendatei sieht aus wie gewöhnliches HTML mit darin eingebetteten Snippets. Weniger Ebenen bedeuten weniger Einstellungen, die Sie im Blick behalten müssen.
• Freiheit, Interaktivität hinzuzufügen. Sie können eine Insel mit React, Preact, Vue, Svelte oder Solid erstellen – Astro unterstützt die wichtigsten Bibliotheken. Für ein Portfolio oder einen Blog können Sie aber oft ganz darauf verzichten.

Eine separate Übersicht über das Tool selbst finden Sie unter was Astro ist und warum es für eine mit KI erstellte Website nützlich ist; der vollständige Erstellungsprozess steht in der Anleitung wie man mit Claude Code eine Website mit Astro erstellt.

Wie ist eine Next.js-Website aufgebaut?#

Die Next.js-Dokumentation sagt ausdrücklich, dass vor dem Einstieg Kenntnisse in HTML, CSS, JavaScript und React erwartet werden. Das bedeutet eine steilere Lernkurve. Die Komplexität wirkt sich auch auf die Arbeit des Agenten aus: Je komplizierter die Projektstruktur ist, desto mehr Gelegenheiten gibt es für Fehler bei Rendering- und Caching-Einstellungen. Next.js hat zwei Router: den neueren App Router mit Server Components und den älteren, aber weiterhin unterstützten Pages Router. Online-Materialien vermischen beide, daher sollten Sie dem Agenten zu Beginn eines neuen Projekts sagen, welchen Router er verwenden soll.

Der Vorteil ist, dass Next.js Serverlogik unterstützt, die eine inhaltsorientierte Website nicht benötigt: Seiten für einzelne Besucher zusammenzustellen, Anmeldungen und Sitzungen zu verwalten und Daten über eigene API-Routen bereitzustellen. Wenn die Website ein Dienst ist, bei dem jeder Nutzer eine andere Ansicht hat, kommt Ihnen diese ganze Infrastruktur zugute.

Was ist für einen KI-Agenten einfacher?#

Astro hat einen offiziellen MCP-Server für die Dokumentation: Er ist kostenlos und läuft remote. Sie müssen den Server selbst nicht installieren; fügen Sie seine Adresse zu den Einstellungen des Agenten hinzu, dann kann dieser die aktuelle Astro-Dokumentation direkt abrufen. Ohne den Server verlässt sich der Agent auf sein Gedächtnis, das veraltet. Die Astro-Entwickler sagen ausdrücklich, dass KI-Tools häufig veraltete Ansätze empfehlen und der MCP-Server entwickelt wurde, um dem entgegenzuwirken.

Next.js bietet ein entsprechendes Format auf eigene Weise: Die gesamte Dokumentation ist unter /docs/llms.txt in maschinenlesbarem Format verfügbar. Geben Sie dem Agenten diese Adresse, bevor er mit der Arbeit beginnt.

„Der Agent kennt das Framework nicht“ ist also kein Argument für eine der beiden Seiten. Der Unterschied besteht im Arbeitsaufwand. Für ein Portfolio in Astro genügen wenige Dateien, die fast ausschließlich aus HTML bestehen. Dieselbe Website in Next.js erfordert React-Komponenten, die Auswahl eines Routers und Entscheidungen über Rendering-Modi. Ein statisches Astro-Projekt hat weniger bewegliche Teile und lässt sich daher jetzt leichter überprüfen und auch in sechs Monaten noch verstehen.

Wo können Sie die Website hosten, und was kostet das?#

Eine statische Website wird einmal erstellt und anschließend als fertige Dateien gespeichert. Sie braucht keinen „laufenden Server“, sondern einen Ort, von dem die Dateien ausgeliefert werden. Das ist im Allgemeinen die günstigste Art des Hostings: Zum Zeitpunkt der Erstellung dieses Artikels stellen GitHub Pages und Cloudflare Pages statische Websites kostenlos bereit. Jeder einfache VPS kann dasselbe leisten, allerdings müssen Sie darauf den Webserver konfigurieren. Die Anleitung zum Erstellen einer Website mit Astro und Claude Code beschreibt den Ablauf vom leeren Ordner bis zur kostenlosen Veröffentlichung.

Next.js unterstützt auch einen vollständig statischen Export. Setzen Sie output: 'export' in next.config.js und führen Sie das Projekt-Buildskript (next build) aus. Der erzeugte Ordner out/ lässt sich ohne produktiven Node.js-Prozess statisch ausliefern. React und Next.js bleiben Teil des Builds; statisches Hosting entfernt ihre Entwicklungsaufwände nicht.

Static Export bietet keine Cookies zur Anfragezeit, Server Actions, anfrageabhängigen Route Handlers oder ISR. Auch die standardmäßige Bildoptimierung braucht eine andere Konfiguration. Dynamische Routenpfade müssen beim Build feststehen. Benötigen Sie diese Serverfunktionen, wählen Sie eine unterstützte Laufzeit oder einen externen Dienst und kalkulieren Sie dessen Kosten. Siehe offizielle Konfiguration und Grenzen des Static Export.

Der vollständige Servermodus von Next.js funktioniert anders: Er benötigt einen Node.js-Prozess, der kontinuierlich auf einem Server läuft und Seiten bei Bedarf zusammenstellt. Es gibt zwei Möglichkeiten. Die erste ist ein eigener Server: ein VPS, auf dem der Agent Node.js einrichtet und die Website am Laufen hält. Die zweite ist Vercel, die Plattform der Next.js-Entwickler: Dort ist die Veröffentlichung am einfachsten, aber überprüfen Sie am Tag des Starts die Preise, Beschränkungen und Bedingungen für kommerzielle Websites – sie ändern sich. Prüfen Sie außerdem, welche Zahlungsmethoden für den von Ihnen gewählten Dienst verfügbar sind; dies wurde für diesen Artikel nicht überprüft.

Astro bietet ebenfalls einen Servermodus und Adapter für Node, Vercel und Cloudflare, falls Seiten bei eingehenden Anfragen zusammengestellt werden müssen. Die Wahl von Astro heute schließt dynamische Funktionen später also nicht aus. Wenn serverseitige Funktionen jedoch umfangreich werden, ist Next.js die sinnvollere Wahl.

Wann benötigen Sie tatsächlich Next.js?#

Hier ist ein einfacher Test. Stellen Sie sich vor, zwei Besucher öffnen Ihre Website in derselben Sekunde. Wenn beide dasselbe sehen, haben Sie eine inhaltsorientierte Website, und Next.js würde unnötige Komplexität hinzufügen. Wenn jeder etwas anderes sieht – einen Kontostand, Bestellungen oder Nachrichten –, haben Sie eine Anwendung, für die Next.js passt. Das ist eines von mehreren Anzeichen: Berücksichtigen Sie auch, ob Sie eigene Anmeldungen, serverseitige Vorgänge und Datenaktualisierungen zum Zeitpunkt der Anfrage benötigen.

Der zweite Grund ist das Team. Wenn ein Programmierer das Projekt entwickeln wird, fragen Sie vorher, womit er arbeitet: Vertrautheit mit React spricht für Next.js. Bei einer Website, die Sie mit einem einzelnen Agenten verwalten, gilt dieses Argument nicht. Bei einem Projekt, das mit einem Team zu einem Produkt wachsen soll, schon.

Wie können Sie Ihre Wahl anhand Ihres Projekts überprüfen?#

Gehen Sie folgendermaßen vor:

1. Listen Sie die Seiten auf, die Ihre künftige Website haben wird: Startseite, Dienstleistung, Blog, Artikel, Kontakt – oder Konto, Bestellungen, Zahlungen.
2. Markieren Sie die Seiten, auf denen jeder Besucher eigene Inhalte sieht. Gibt es keine, wählen Sie Astro. Wenn diese Seiten im Mittelpunkt des Produkts stehen, ziehen Sie Next.js in Betracht. Auch zu einer mit Astro erstellten inhaltsorientierten Website können Sie ein oder zwei personalisierte Funktionen hinzufügen: über den Servermodus oder einen externen Dienst. Kalkulieren Sie die Kosten im Voraus: Der Servermodus bedeutet einen Adapter und Serverhosting; ein externer Dienst bedeutet eine Rechnung und die Speicherung fremder Daten bei jemand anderem.
3. Bitten Sie den Agenten, eine repräsentative Seite zu erstellen, und sehen Sie sich das Ergebnis an: Wie viele Dateien hat er erstellt, und verstehen Sie, was darin steht?
4. Fragen Sie den Agenten, wie er das Projekt hosten möchte, und berechnen Sie die monatlichen Kosten, bevor Sie anfangen.

Der letzte Schritt klärt die Frage oft. Vergleichen Sie Astro-Statikausgabe und Next.js-Static-Export für dieselben Seiten. Vergleichen Sie Serverhosting nur bei benötigten Serverfunktionen zur Anfragezeit. Ein Next.js-Projekt benötigt nicht allein wegen Next.js einen kostenpflichtigen laufenden Server.

Häufig gestellte Fragen#

Kann ich später von Astro zu Next.js wechseln?

Das ist möglich, bedeutet in der Praxis aber, das Projekt neu zu schreiben: Markup und Text können Sie übernehmen, die Seitenstruktur müssen Sie jedoch neu aufbauen. Deshalb ist die Testseite im Abschnitt oben keine bloße Formalität.

Was sollte ich für einen Onlineshop wählen?

Ein Katalog und Produktseiten sind ebenfalls Inhalte, und Astro kommt damit gut zurecht. Binden Sie für Warenkorb und Zahlungen einen fertigen Dienst oder ein Widget ein. Wenn der Shop zu einem Marktplatz mit persönlichen Konten für Verkäufer wächst, ist er nun eine Anwendung; ziehen Sie daher Next.js in Betracht.

Und was genau ist ein „Framework“, und warum kann der Agent nicht selbst entscheiden?

Ein Framework ist eine fertige Struktur für eine Website: eine Sammlung von Regeln und Bausteinen, mit denen der Agent Seiten zusammensetzt. Der Agent kann mit jedem Framework arbeiten, das Sie ihm vorgeben. Aber Sie müssen mit den Folgen leben – Hosting, Kosten und Wartung –, daher liegt die endgültige Entscheidung bei Ihnen.

Die Wahl eines Tools ist eine von Dutzenden Entscheidungen. Entdecken Sie Ailoot weiter unter ailoot.ai.