Next.js URL Split Screen

v1.0.0

Im Next.js App Router wird nur die URL angegeben, um die page.tsx auf dem Server zu rendern und in ein neues Pane von FlexLayoutSplitScreen zu ziehen.

Ablauf

Das allgemeine FlexLayout ist wie gewohnt für Layout und Größenänderung zuständig, während die dynamische Teilung von FlexLayoutSplitScreen übernommen wird. Der spezielle Einstiegspunkt für Next.js interpretiert die URL des DragBox als generiertes Registry, rendert die page.tsx auf dem Server und überträgt das Ergebnis in das entsprechende Split-Pane.

text

1. Registry erstellen

Stellen Sie nur den App-Pfad und den Ausgabepfad oben im Skript Ihres Projekts ein. Das Ergebnis ist ein statisches Import-Registry, das die Route-Gruppe und dynamische Segmente interpretieren kann, wobei der Standardexport FlexLayoutNextSplitScreen ist.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Anwendung von FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen ist ein Next.js-spezifischer Wrapper, der das serverseitige Rendering des URL-Panels mit dem generierten Page-Registry bereitstellt. Es muss einmal um den FlexLayoutSplitScreen-Baum gewickelt werden, der das URL-basierte Panel erhält.

tsx

3. Wiederherstellung der URL-Panel-Aktualisierung

Das Ziel der Wiederherstellung sind nur die Next-URL-Panels, die neu erstellt werden können.

Wird von FlexLayoutNextSplitScreen umschlossen, und der Next.js-spezifische DragBox verwendet die URL-Methode, wobei der targetComponent nicht direkt angegeben wird und auch kein iframe verwendet wird, sodass nur diese Panels im persistenten Snapshot enthalten sind. Die targetComponent-Methode blockiert das normale Rendering nicht, wird jedoch von den Zielen der Wiederherstellung ausgeschlossen.

Wenn persistence angegeben ist, werden nur die serialisierbaren Metadaten wie URL, screenKey, containerName, navigationTitle und die Struktur gespeichert, nicht das ReactElement selbst. Wenn restoreOnReload false ist, wird persistence nicht verwendet, und wenn syncWithBrowserUrl true ist, wird ein Snapshot für jede URL basierend auf pathname + search gespeichert. Bei Zurück/Weiter oder erneutem Besuch derselben URL wird der gesamte URL-basierte Split-Zustand dieser URL wiederhergestellt, und beim Aktualisieren wird der aktuelle URL-Snapshot wiederhergestellt.

tsx

4. DragBox übergibt nur die URL

Die Next.js-spezifische DragBox benötigt nur die URL und erfordert nicht die direkte Erstellung eines targetComponent. Wenn ein targetComponent angegeben wird, hat die bestehende Methode Vorrang, und das entsprechende Pane wird von der Persistence ausgeschlossen.

tsx

5. iframe ist optional

Der Standardwert für iframe ist false. Setzen Sie iframe nur auf true, wenn eine externe URL oder ein unabhängiger Dokumentkontext erforderlich ist. Der iframe-Modus benötigt kein Page-Registry von FlexLayoutNextSplitScreen und wird auch von der Persistence ausgeschlossen.

tsx

Einschränkungen des Router-Kontexts

Auf dem Serverpage werden die aus der URL extrahierten params und searchParams übergeben. Da das Split-Pane jedoch kein separater Next Router ist, funktionieren die usePathname, useParams und useSearchParams des internen Client Components basierend auf der tatsächlichen URL des Browsers.