在 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

FlexLayoutSplitScreenDragBox url
  -> generated page registry
  -> FlexLayoutNextSplitScreen
  -> Server Component page.tsx
  -> RSC result
  -> FlexLayoutSplitScreen pane

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

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

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

import { generateFlexLayoutSplitScreenPageRegistry } from "@byeolnaerim/flex-layout/next/generator";

const registryConfigs = [
  {
    appDir: "src/app",
    outFile: "src/generated/flexLayoutPageRegistry.ts",
    excludedRoutes: [],
    includeLayouts: true,
    excludeRootLayout: true,
  },
];

registryConfigs.forEach((config) => {
  generateFlexLayoutSplitScreenPageRegistry(config);
});

2. 应用FlexLayoutNextSplitScreen

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

tsx

import FlexLayoutNextSplitScreen from "@/generated/flexLayoutPageRegistry";
import { FlexLayoutSplitScreen } from "@byeolnaerim/flex-layout";

<FlexLayoutNextSplitScreen
  persistence={{
    storage: "auto",
	keyName:"byeolnaerim-docs-split-screen-v6",
    restoreOnReload: true,
    syncWithBrowserUrl: true,
  }}
>
  <FlexLayoutSplitScreen
    layoutName="root-split-screen"
    containerName="main-split-screen"
    navigationTitle="ROOT"
	dropDocumentOutsideOption={{
		openUrl:
			localizePathname(
				"/",
				locale,
			),
		widthRatio: 0.7,
		heightRatio: 0.5,
	}}
  >
    {children}
  </FlexLayoutSplitScreen>
</FlexLayoutNextSplitScreen>

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

<FlexLayoutNextSplitScreen
  persistence={{
    storage: "auto",
    keyName: "workspace-split-screen",
    restoreOnReload: true,
    syncWithBrowserUrl: false,
  }}
>
  {children}
</FlexLayoutNextSplitScreen>

4. DragBox 仅传递 URL

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

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";

<FlexLayoutSplitScreenDragBox
  url="/flex-layout/guides/next-url-split-screen"
  containerName="next-url-split-screen"
  navigationTitle="Next.js URL Split Screen"
>
  <button type="button">Drag me</button>
</FlexLayoutSplitScreenDragBox>

5. iframe 是可选的

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

tsx

<FlexLayoutSplitScreenDragBox
  url="https://example.com"
  iframe
  containerName="external-page"
  navigationTitle="External page"
>
  <button type="button">External page</button>
</FlexLayoutSplitScreenDragBox>

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

当前版本