JavaScript, Node.js-Apps und Exponential #

Eine JavaScript-Site ist ein Frontend; ihre Inhalte liegen woanders: in Markdown- oder MDX-Dateien im Repository, in einem Headless-CMS, in einer Datenbank hinter einer API oder im Code selbst. „Eine Next.js-Site migrieren“ bedeutet also zwei Entscheidungen: wohin die Inhalte gehen (nach Exponential) und was die Site rendert (die Templates von Exponential oder das bestehende Frontend, das Exponential ausliest).

Übersicht Migration · Checkliste · Abbildung · Werkzeuge

Inhalt #

• 1. Wo die Inhalte einer JavaScript-Site liegen
• 2. Inhalte nach Exponential
• 3. Das JavaScript-Frontend behalten: Exponential als seine Inhaltsquelle
• 4. Adressen und Weiterleitungen
• 5. Von Exponential zu einem JavaScript-Frontend
• 6. Checkliste

1. Wo die Inhalte einer JavaScript-Site liegen #

Next.js speichert selbst keine Inhalte. Laut seiner Dokumentation lässt output: 'export' den Befehl next build statisches HTML, CSS und JavaScript nach out/ schreiben (next export wurde in Version 14 entfernt). Diese Ausgabe ist ein vollständiges Crawl-Ziel für die Methode für statisches HTML, wenn sich die Quellen nur schwer auslesen lassen.

2. Inhalte nach Exponential #

1. Sammeln Sie die Quellen: Listen Sie die Inhaltsverzeichnisse, Datendateien und APIs auf, die die App zur Build- oder Anfragezeit liest (sehen Sie sich getStaticProps/generateStaticParams, Loader oder die Datenschicht Ihres Frameworks an).
2. Wandeln Sie Markdown/MDX um: Lesen Sie in Node.js das Front Matter ein und rendern Sie Markdown mit der Bibliothek, die die Site bereits verwendet, zu HTML, damit das Ergebnis dem entspricht, was die Besucher gesehen haben. MDX-Komponenten (<Callout>, <Video>) haben keine HTML-Entsprechung: Bilden Sie jede auf einen Custom Tag oder eine Einbettung von Exponential ab oder rendern Sie sie zu einfachem HTML.
3. Schreiben Sie JSON-Zeilen: Remote-ID aus dem Dateipfad oder Slug (md-blog/2024/hello), Titel, Datum, Schlagwörter, Autor, das HTML, die Route.
4. Importieren Sie mit dem Skript-Grundgerüst auf dem Server oder mit dem Importer von xrowextract mit --map. Medien aus public/ werden zu Bild-/Dateiobjekten.
5. Templates: Bauen Sie TPL-Templates oder behalten Sie das Frontend (3).

3. Das JavaScript-Frontend behalten: Exponential als seine Inhaltsquelle #

Exponential kann die Headless-Inhaltsquelle eines bestehenden Frontends sein; Redakteure arbeiten in der Administration von Exponential, das Frontend holt die Inhalte zur Build- oder Anfragezeit.

Schreibzugriffe über REST sind eingeschränkt (Anlegen und Löschen ab v2; Aktualisieren antwortet derzeit mit 501), deshalb werden Massenimporte auf dem Server ausgeführt, nicht vom Frontend aus.

4. Adressen und Weiterleitungen #

• Behalten Sie die Routen: Geben Sie jedem Knoten den Alias seiner alten Route, damit das Frontend (oder die eigenen Templates von Exponential) dieselben Pfade ausliefern kann.
• Laut der Dokumentation von Next.js unterstützt ein statischer Export keine redirects, rewrites oder headers aus next.config.js, ebenso wenig Route Handlers, die die Anfrage verwenden, ISR, Server Actions oder die standardmäßige Bildoptimierung: Weiterleitungen einer statisch exportierten Site gehören zum Hoster oder Webserver.
• Wenn Exponential die Site rendert, sind die Weiterleitungen URL-Aliase und Platzhalter (Checkliste, 4).

5. Von Exponential zu einem JavaScript-Frontend #

• Behalten Sie Exponential als Inhaltsquelle und bauen Sie das neue Frontend gegen seine REST-API (3).
• Oder ziehen Sie die Inhalte heraus: Exportieren Sie mit xrowextract nach JSON (Exponential verlassen), rendern Sie XmlText zu HTML oder Markdown und schreiben Sie die Dateien oder das Headless-CMS Ihrer Wahl.
• Bild-Aliase (skalierte Varianten) erzeugt Exponential; eine statische Site braucht ihre eigene Bildverarbeitung.

6. Checkliste #

• To do: Jede Inhaltsquelle der App aufgelistet (Dateien, Daten, APIs, fest codiert).
• To do: Markdown mit dem eigenen Renderer der Site gerendert; MDX-Komponenten abgebildet.
• To do: Mit Remote-IDs aus Pfaden oder Slugs importiert; Medien importiert.
• To do: Entscheidung getroffen: Templates von Exponential oder das Frontend, das Exponential ausliest (Scopes der API-Schlüssel gesetzt).
• To do: Routen erhalten oder beim Hoster weitergeleitet.

Quellen #

• Statische Exporte in Next.js: https://nextjs.org/docs/app/guides/static-exports

Diese Seite ist Teil der Exponential-Dokumentation und freie Dokumentation unter der GNU Free Documentation License 1.3 oder einer späteren Version (die Lizenz dieser Dokumentation).