Next.js URL Split Screen

v1.0.0

In Next.js App Router, provide only a URL to server-render the matching page.tsx and drop it into a new FlexLayoutSplitScreen pane.

How it works

Regular FlexLayout keeps handling layout and resizing, while FlexLayoutSplitScreen handles dynamic splitting. The Next.js entry resolves the DragBox url through the generated registry, renders the matching page.tsx on the server, and delivers the result to that split pane.

text

1. Generate the registry

Set only the app path and output path at the top of the script of the used project. The generated result is a static import registry that can interpret route groups and dynamic segments, with the default export being FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Apply FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen is a Next.js specific wrapper that provides server rendering for the URL pane using the generated page registry. It only needs to wrap the FlexLayoutSplitScreen tree that receives URL-based panes once.

tsx

3. Restore URL pane refresh

The restoration target is only the Next URL pane that can be recreated.

Only includes panes wrapped in FlexLayoutNextSplitScreen, with Next.js specific DragBox that uses URL method, and does not directly specify targetComponent or use iframes in persistent snapshots. The targetComponent method does not block normal rendering but is excluded from the refresh restoration target.

When persistence is specified, only serializable metadata like URL, screenKey, containerName, navigationTitle, and split structure is stored, not the ReactElement itself. If restoreOnReload is false, persistence is not used, and if syncWithBrowserUrl is true, a snapshot is saved for each pathname + search URL. The full URL-based split state for that URL is restored when navigating back/forward or revisiting the same URL, and the current URL snapshot is restored on refresh.

tsx

4. Only the URL is passed to DragBox.

The Next.js specific DragBox only receives the URL without needing to create a targetComponent. If a targetComponent is specified, the existing method takes precedence, and that pane is excluded from persistence.

tsx

5. iframe is optional.

The default for iframe is false. Set iframe to true only if an external URL or independent document context is needed. The iframe mode does not require a page registry for FlexLayoutNextSplitScreen and is also excluded from persistence.

tsx

Router context limitations

The server page receives params and searchParams extracted from the URL. However, a split pane is not an independent Next Router, so usePathname, useParams, and useSearchParams inside Client Components still resolve against the browser's real URL.