在 Next.js App Router 中，只需指定 URL 即可在服務器上渲染該 page.tsx，並將其放入 FlexLayoutSplitScreen 的新窗格中。

v1.0.0

這個頁面本身是 Server Component 測試的對象。

一般的 FlexLayout 負責佈局和調整大小，而動態分割由 FlexLayoutSplitScreen 負責。Next.js 專用的進入點將 DragBox 的 URL 解釋為生成的 registry，然後在服務器上渲染 page.tsx，並將結果傳遞到該分割窗格中。

1. 創建 Registry

text

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

在使用的項目腳本的頂部僅設置應用路徑和輸出路徑。生成的結果是一個靜態導入 registry，可以解釋路由組和動態段。

在使用的專案的腳本頂部僅設置應用路徑和輸出路徑。生成結果是可以解析路由組和動態段的靜態導入註冊表，基本導出為 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 方式不會阻止正常渲染，但在重新整理恢復對象中將被排除。

指定 persistence 時，僅將可序列化的 metadata（如 URL、screenKey、containerName、navigationTitle、分割結構）儲存到 storage，而不是 ReactElement 本身。如果 restoreOnReload 為 false，則不使用 persistence；如果 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，則優先使用舊有方式，該面板將不包括在 persistence 目標中。

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 的頁面註冊，並且也不包括在 persistence 目標中。

tsx

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

服務器頁面將傳遞從 URL 中提取的 params 和 searchParams。然而，分割窗格不是單獨的 Next Router，因此內部 Client Component 的 usePathname、useParams、useSearchParams 將根據瀏覽器的實際 URL 運行。

當前版本