ใน Next.js App Router ให้ระบุ URL เท่านั้นเพื่อเรนเดอร์ page.tsx บนเซิร์ฟเวอร์และวางลงใน pane ใหม่ของ FlexLayoutSplitScreen

v1.0.0

หน้านี้เองเป็นเป้าหมายการทดสอบ Server Component

FlexLayout ทั่วไปจะรับผิดชอบการจัดเลย์เอาต์และการปรับขนาดเหมือนเดิม และการแบ่งแบบไดนามิกจะถูกจัดการโดย FlexLayoutSplitScreen จุดเริ่มต้นเฉพาะสำหรับ Next.js จะสร้าง URL ของ DragBox เป็น registry ที่สร้างขึ้นแล้วเรนเดอร์ page.tsx บนเซิร์ฟเวอร์และส่งผลลัพธ์ไปยัง pane ที่แบ่งนั้น

1. สร้าง Registry

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

ตั้งค่าเส้นทางแอปและเส้นทางเอาต์พุตที่ด้านบนของสคริปต์ของโปรเจกต์ที่ใช้ ผลลัพธ์ที่สร้างขึ้นจะเป็น registry แบบสถิติที่สามารถตีความกลุ่มเส้นทางและ segment แบบไดนามิกได้

ตั้งค่าเส้นทางแอปและเส้นทางเอาต์พุตที่ด้านบนของสคริปต์ในโปรเจกต์ที่ใช้ ผลลัพธ์ที่สร้างขึ้นคือ registry นำเข้าแบบสถิติที่สามารถตีความกลุ่มเส้นทางและ segment แบบไดนามิก โดยค่าเริ่มต้น export คือ FlexLayoutNextSplitScreen

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs
js
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 เป็น wrapper เฉพาะสำหรับ Next.js ที่ให้การเรนเดอร์เซิร์ฟเวอร์ของ URL pane โดยใช้ page registry ที่สร้างขึ้น เพียงห่อ FlexLayoutSplitScreen tree ที่รับ pane ตาม URL หนึ่งครั้งเท่านั้น

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 pane

เมื่อกำหนด persistence จะมีการจัดเก็บเฉพาะ metadata ที่สามารถทำให้เป็นแบบอนุกรมได้ เช่น URL, screenKey, containerName, navigationTitle และโครงสร้างการแบ่งเท่านั้น ไม่ได้จัดเก็บ ReactElement เอง หาก restoreOnReload เป็น false จะไม่ใช้ persistence และหาก syncWithBrowserUrl เป็น true จะจัดเก็บ snapshot ตาม pathname + search URL เมื่อย้อนกลับ/ไปข้างหน้าหรือกลับไปที่ URL เดิม จะมีการกู้คืนสถานะการแบ่งทั้งหมดตาม URL นั้น และเมื่อรีเฟรชจะกู้คืน snapshot ของ URL ปัจจุบันด้วย

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

4. DragBox จะส่งเฉพาะ URL เท่านั้น

DragBox เฉพาะสำหรับ Next.js จะรับเฉพาะ URL โดยไม่ต้องสร้าง targetComponent โดยตรง หากระบุ targetComponent จะใช้วิธีการเดิมเป็นหลักและ pane นั้นจะไม่รวมอยู่ในเป้าหมาย 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 จะต้องกำหนดเป็น true เฉพาะเมื่อจำเป็นต้องใช้ URL ภายนอกหรือบริบทเอกสารที่แยกต่างหาก โหมด iframe ไม่ต้องการ page registry ของ FlexLayoutNextSplitScreen และจะไม่รวมอยู่ในเป้าหมาย persistence

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

ในหน้าเซิร์ฟเวอร์จะมี params และ searchParams ที่ดึงมาจาก URL ถูกส่งไป อย่างไรก็ตาม split pane ไม่ใช่ Next Router แยกต่างหาก ดังนั้น usePathname, useParams, useSearchParams ของ Client Component ภายในจะทำงานตาม URL ที่แท้จริงของเบราว์เซอร์

Current version

© 2026 Byeolnaerim. สงวนลิขสิทธิ์.แนะนำนโยบายการจัดการข้อมูลส่วนบุคคล