Von Next.js zu Astro, wenn das Projekt Content ist.
Der Wechsel von Next.js zu Astro lohnt sich, wenn Ihr Projekt im Kern Content ist: Marketing-Site, Doku oder Blog. Astro liefert standardmäßig statisches HTML aus, Ihre React-Komponenten dürfen mitkommen.
React muss nicht weg
Astro ist UI-Framework-agnostisch und bindet React offiziell ein. Bestehende Komponenten laufen als Islands weiter.
Kein Client-JavaScript im Standard
Astro entfernt standardmäßig sämtliches Client-seitige JavaScript aus Komponenten. Hydration ist ein Opt-in pro Komponente.
Dokumentierter Pfad
Für Next.js existiert ein offizieller Migrations-Guide. Die Docs weisen darauf hin, dass viele Guides Stubs sind.
Eigene Produkte, live im Browser.
Screenshots aus Mini Marvin, unserer eigenen Progressive Web App im Browser.
Babynamen swipen statt scrollen
Mini Marvin ist unsere Progressive Web App zur Namenssuche: durch über 10.000 Vornamen swipen, direkt im Browser und ohne App-Store.
Next.js zu Astro in vier Punkten.
Wechseln, wenn es eine Content-Site ist.
- Marketing-Auftritt, Docs, Blog, Karriereseiten.
- Astro liefert vorgerendertes HTML, mit Interaktivität nur dort, wo sie gebraucht wird.
Bleiben, wenn es eine Anwendung ist.
- Login, Rollen, geteilter Client-State über Routen hinweg und ein Dashboard mit vielen Zuständen.
- Dann passt Next.js besser.
Ihre React-Komponenten überleben.
- Astro bindet React offiziell ein.
- Eine bestehende Komponentenbibliothek wird als Insel montiert, nicht weggeworfen.
Der Unterschied ist die Voreinstellung.
- Astro rendert standardmäßig vor.
- Einzelne Routen rendern auf Anfrage, sobald Sie
export const prerender = falsesetzen und einen Adapter installieren.
Wechseln oder bleiben? Wir prüfen das.
Schildern Sie in drei Sätzen, was Ihr Next.js-Projekt heute ist: Marketing-Site, Docs, Produkt oder alles zusammen.
Zu Astro wechseln oder bei Next.js bleiben.
Die Trennlinie liegt bei der Frage, ob Sie eine Anwendung betreiben oder Inhalte veröffentlichen.
Zu Astro wechseln, wenn …
- Ihr Repository heißt website oder docs und enthält trotzdem den vollen Stack einer Anwendung.
- Der größte Teil Ihrer Seiten ist statisch. Interaktiv sind ein Menü, ein Formular, ein Filter, ein Rechner.
- Ihre Core Web Vitals leiden am ausgelieferten JavaScript, und die Optimierung besteht darin, Framework-Code kleinzuschneiden.
- Redaktion und Marketing warten auf Entwicklung, weil das Content-Modell in Props und Fetch-Aufrufen steckt.
Bei Next.js bleiben, wenn …
- Ihr Produkt eine Anwendung ist: Authentifizierung, Rollen, Benutzerkonten, ein Dashboard mit echtem Zustand.
- Sie geteilten Client-State über Routen hinweg brauchen: Warenkorb, Filter-Session, mehrstufige Formulare ohne Neuladen.
- Ihre Architektur an Next-spezifischen Bausteinen hängt: Middleware-Muster, ISR-Semantik, Server-Component-Komposition im App Router.
- Es läuft, es ist gemessen schnell genug, und niemand hat Schmerzen.
So läuft die Migration von Next.js zu Astro.
Fünf Schritte, der erste entscheidet über die Empfehlung.
Bestandsaufnahme
Routen sortieren: rein statisch, statisch mit einer Insel, echt dynamisch. Dazu URLs und Felddaten.
Content-Modell definieren
MDX-Dateien, CMS-Antworten und handgetypte Props werden zu Content Collections mit Zod-Schema.
React-Komponenten als Islands
Import in eine .astro-Datei, danach client:load, client:visible oder client:idle je Komponente.
Routen und URLs abbilden
Die Struktur bleibt identisch. Jede Abweichung bekommt vorab eine 301-Weiterleitung.
Launch und Nachmessung
Indexierung, Positionen und Felddaten mehrere Wochen beobachten, danach Übergabe mit Repository und README.
Häufige Fragen zur Migration von Next.js zu Astro.
Können wir unsere React-Komponenten behalten?
Ja, das ist der wichtigste technische Punkt dieser Migration. Astro ist UI-Framework-agnostisch und hat eine offizielle React-Integration, neben Preact, Svelte, Vue, SolidJS und Alpine.js. Eine Komponente wird importiert und über eine client:*-Direktive als Insel montiert.
Was passiert mit Server-Komponenten und dem App Router?
Die Konzepte werden ersetzt. In Astro ist Vorrendern die Voreinstellung: Standardmäßig wird die gesamte Seite vorgerendert. Dynamik entsteht, wo Sie sie anfordern, über export const prerender = false plus Adapter für die Route oder über Server Islands mit server:defer.
Wir arbeiten mit ISR. Gibt es in Astro ein Gegenstück zur Revalidierung?
Kein Eins-zu-eins-Gegenstück. Drei Wege führen zum Ziel: vorgerendertes HTML, das bei Inhaltsänderung neu gebaut wird; Routen mit export const prerender = false plus Adapter; Server Islands, bei denen Shell und Hauptinhalt gecacht bleiben und personalisierte Elemente nachladen.
Wie lange dauert eine Migration von Next.js zu Astro?
Eine Docs- oder Marketing-Site mit wenigen Layouts, einer Sprache und ohne CMS: 4 bis 7 Wochen. Ein gewachsener Auftritt mit CMS, zwei Sprachen und mehreren dynamischen Routen: 8 bis 14 Wochen. Danach 8 bis 12 Wochen Beobachtung.
Was kostet die Migration von Next.js zu Astro?
Den Rahmen bestimmen die Zahl unterschiedlicher Seitentypen, die Tiefe des Content-Modells und die Next-spezifischen Bausteine, an denen etwas hängt. Nach der Bestandsaufnahme bekommen Sie eine Schätzung mit offengelegten Annahmen, siehe Astro Kosten.
Können wir Inhalte danach ohne Entwickler pflegen?
Ja. Content Collections mit Zod-Schema oder ein angebundenes Headless CMS, auf Wunsch zusätzlich per Chat. Wir arbeiten KI-gestützt und betreiben einen WhatsApp-KI-Agenten. Den laufenden Betrieb deckt Support und Wartung.
Ist Ihr Next.js-Projekt eine Anwendung oder Inhalt?
Beschreiben Sie kurz, was heute live ist und wo es weh tut. Sie bekommen eine Einschätzung zu Wechsel, Aufwand und Alternativen.
Next.js-zu-Astro-Migration anfragen.
Repository-Umfang, Seitentypen und Next-spezifische Abhängigkeiten: drei Sätze genügen für eine erste Einschätzung.
Antwort in der Regel innerhalb von 24 Stunden.
Remote und vor Ort in Deutschland, Österreich und der Schweiz. Internationale Projekte auf Anfrage.
Passend zu diesem Thema.
Astro vs. Next.js
Der nüchterne Modellvergleich, bevor Sie über einen Umzug nachdenken.
Mehr erfahrenAstro Migration
Alle Migrationswege im Überblick: WordPress, Webflow, Framer und Next.js.
Mehr erfahrenAstro Performance-Optimierung
Core Web Vitals messen, verbessern und nach dem Launch belegen.
Mehr erfahrenIndividuelle Softwareentwicklung
Wenn Ihr Projekt eine Anwendung ist und bleiben soll.
Mehr erfahrenAstro Agentur
Leistungen, Kostenrahmen und Vorgehen im Astro-Stack.
Mehr erfahrenIT-Projektleitung
Wenn die Migration Teil eines größeren Vorhabens ist.
Mehr erfahren