Gatsby Schulung: betreiben und zu Astro oder Next.js migrieren

Gatsby einordnen und den Bestand bewerten

• Was Gatsby einst modernisiert hat: React, GraphQL-Datenschicht, Bauen zur Build-Zeit
• Gatsby als Generator für statische Websites, SSG, DSG und SSR im Vergleich
• Grundlegende Gatsby-Prinzipien: Datenschicht, Seitenerzeugung, Plugin-System
• Aktuellen Projektstatus von Gatsby und Folgen für Sicherheit und Wartung bewerten
• Abhängigkeiten auditieren: Plugins ohne Pflege, Sicherheitsmeldungen, Node-Version

Ein Gatsby-Bestandsprojekt betreiben

• Erste Einrichtung eines vorhandenen Projekts: passende Node-Version und Lockfile
• Projekte aus Gatsby-Startern erkennen und deren Voreinstellungen verstehen
• Lokale Gatsby-Site starten und stoppen: gatsby develop, build, serve, clean
• Das Projekt erkunden: gatsby-config, gatsby-node, gatsby-browser, gatsby-ssr
• Site-Titel, Metadaten und Inhalte ändern; Head API statt react-helmet

Seiten, Komponenten und Stile – und ihr Gegenstück im Zielsystem

• Statische Seiten aus src/pages und ihre Entsprechung im Astro- oder Next.js-Routing
• Statische Assets im Ordner static und ihre Übernahme nach public
• React-Komponenten weiterverwenden: was in Astro als Insel, was als Astro-Komponente
• Die Layout-Komponente in Astro-Layouts oder Next.js-layout-Dateien überführen
• CSS in Gatsby: globale Stylesheets, Inline-Styles, CSS Modules, styled-components
• CSS-Bausteine und modernes CSS: Custom Properties, Nesting statt Laufzeit-CSS-in-JS
• Navigationskomponente mit Link übertragen und aktive Zustände nachbilden

Plugins und Bilder übertragen

• Gatsby mit Plugins erweitern: Source-, Transformer- und Funktions-Plugins inventarisieren
• Plugin-Optionen auswerten: was jedes Plugin im Build tatsächlich erzeugt
• Transformations-Plugins wie gatsby-transformer-remark durch remark/rehype ersetzen
• Bilder mit gatsby-plugin-image und ihre Ablösung durch astro:assets oder next/image
• Sitemap, RSS-Feed und Manifest: Ersatz für die entsprechenden Gatsby-Plugins

Die GraphQL-Datenschicht verstehen und ablösen

• Gatsby und GraphQL: Datenknoten, Schema-Inferenz und GraphiQL im Entwicklungsserver
• Arten von GraphQL-Abfragen: Seitenabfragen, useStaticQuery, Fragmente
• Dynamisches Navigationsmenü aus Daten erzeugen – vorher und nachher
• Abfragen ersetzen durch Astro Content Collections oder direkte Datenzugriffe
• Headless CMS wie WordPress oder Contentful ohne Gatsby-Source-Plugin anbinden

Dynamische Seiten migrieren

• Daten in Seiten transformieren mit createPages in gatsby-node
• Daten durch Transformer verfügbar machen und onCreateNode-Felder wie Slugs lesen
• Transformierte Daten in Seitenvorlagen verarbeiten
• Seiten aus Markdown-Dateien generieren: Gatsby und getStaticPaths in Astro
• Paginierte Indexseiten erstellen und Paginierung im Zielsystem nachbauen
• Paginierte Tag-Indizes hinzufügen und Tag-URLs unverändert übernehmen

Produktion, Hosting und Umstellung

• Produktionsseite erstellen: Build, Caching und Hosting des Bestands, etwa bei Netlify
• PWA- und Offline-Funktionen mit gatsby-plugin-offline prüfen und Service Worker sauber entfernen
• Zielsystem wählen: Astro für Inhalte, Next.js für interaktive Anwendungen
• Zielprojekt von Grund auf anlegen und Inhalte schrittweise übernehmen
• URL-Inventar, Weiterleitungen, Canonical-Angaben und Metadaten für SEO-Parität
• Umschalten ohne Ausfall: Parallelbetrieb, DNS-Wechsel und Kontrolle in der Search Console

Gatsby-Migration mit einem Coding-Agenten

• Agent erstellt Inventar aller Gatsby-Plugins, GraphQL-Abfragen und Seitenvorlagen
• Je Vorlage übersetzt der Agent GraphQL-Abfrage und createPages ins Zielsystem
• Abnahme per Skript: URL-Listen, Titel und Canonical-Angaben beider Builds vergleichen
• Kein eigenmächtiges Gatsby-Plugin-Update: Agent meldet, Team entscheidet

Praxisprojekt: Gatsby-Blog nach Astro umziehen

• Bestandsaufnahme eines Gatsby-Blogs mit Markdown, Bildern und Tag-Seiten
• Beiträge als Content Collection übernehmen, Bilder mit astro:assets ausliefern
• Paginierte Übersichten und Tag-Seiten mit identischen URLs nachbauen
• Weiterleitungen und automatischen URL-Vergleich vor dem Umschalten einrichten

Lernziele

• Sie lesen eine bestehende Gatsby-Site und erklären Datenschicht, Seitenerzeugung und Plugins
• Sie betreiben ein Gatsby-Projekt mit passender Node-Version und bewerten seine Abhängigkeiten
• Sie wählen begründet zwischen Astro und Next.js als Ziel einer Gatsby-Migration
• Sie übertragen Seiten, Markdown-Inhalte, Bilder und Paginierung ins Zielsystem
• Sie sichern die Migration mit URL-Inventar, Weiterleitungen und automatischem Build-Vergleich ab

Zielgruppe

• Teams und Agenturen, die Gatsby-Websites betreuen oder ablösen wollen
• Webentwickler:innen mit React-Grundkenntnissen, die ein Gatsby-Projekt übernommen haben
• Technische Projektleiter:innen, die Aufwand und Risiken einer Migration einschätzen müssen