在 Next.js App Router 中，仅指定 URL 即可在服务器上渲染该 page.tsx，并将其拖放到 FlexLayoutSplitScreen 的新窗格中。

v1.0.0

该页面本身是 Server Component 测试的对象。

普通的 FlexLayout 负责布局和调整大小，而动态分割由 FlexLayoutSplitScreen 负责。Next.js 专用入口点将 DragBox 的 URL 解析为生成的 registry，在服务器上渲染 page.tsx，然后将结果传递到相应的 split pane。

1. 创建 Registry

text

在使用项目的脚本顶部仅设置应用路径和输出路径。生成的结果是一个可以解析路由组和动态段的静态导入 registry。

在使用项目的脚本顶部仅设置应用路径和输出路径。生成结果是可以解析route group和动态segment的静态导入注册表，默认导出是FlexLayoutNextSplitScreen.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. 应用FlexLayoutNextSplitScreen

FlexLayoutNextSplitScreen 是利用生成的页面注册表提供URL面板的服务器渲染的Next.js专用包装器。只需将接收URL基础面板的FlexLayoutSplitScreen树包裹一次.

tsx

3. 恢复URL面板刷新

恢复对象仅限于可重新创建的Next URL面板.

被FlexLayoutNextSplitScreen包裹，并且Next.js专用DragBox是url方式，且不直接指定targetComponent，也不使用iframe的面板仅包含在持久快照中。targetComponent方式不会阻止常规渲染，但在刷新恢复对象中被排除.

指定持久性时，仅将可序列化的元数据（如 URL、screenKey、containerName、navigationTitle、分割结构）存储在存储中，而不是 ReactElement 本身。如果 restoreOnReload 为 false，则不使用持久性；如果 syncWithBrowserUrl 为 true，则保存 pathname + search 的 URL 快照。在后退/前进或重新访问相同 URL 时，恢复该 URL 的完整 URL 基础分割状态，并在刷新时恢复当前 URL 快照。

tsx

4. DragBox 仅传递 URL

Next.js 专用 DragBox 只接收 URL，无需直接创建 targetComponent。如果指定了 targetComponent，则优先使用旧方式，该面板将不包括在持久性目标中。

tsx

5. iframe 是可选的

iframe 的默认值为 false。仅在需要外部 URL 或独立文档上下文时将 iframe 设置为 true。iframe 模式不需要 FlexLayoutNextSplitScreen 的页面注册，并且也不包括在持久性目标中。

tsx

服务器页面将传递从 URL 中提取的 params 和 searchParams。然而，split pane 不是单独的 Next Router，因此内部 Client Component 的 usePathname、useParams、useSearchParams 将基于浏览器的实际 URL 进行操作。

当前版本