Next.js URLスプリットスクリーン

v1.0.0

Next.js App RouterでURLを指定してそのpage.tsxをサーバーでレンダリングし、FlexLayoutSplitScreenの新しいペインにドロップします。

動作フロー

一般的なFlexLayoutは従来通りレイアウトとリサイズを担当し、動的分割はFlexLayoutSplitScreenが担当します。Next.js専用のエントリポイントはDragBoxのURLを生成されたレジストリとして解釈し、サーバーでpage.tsxをレンダリングした後、その結果を該当のスプリットペインに渡します。

text

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

1. レジストリの生成

使用プロジェクトのスクリプト上部にアプリパスと出力パスのみを設定します。生成結果はroute groupと動的segmentを解釈できる静的インポートレジストリであり、基本exportは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も使用しないペインのみpersistent snapshotに含まれます。targetComponent方式は通常のレンダリングを妨げませんが、リフレッシュ復元対象では除外されます。

persistenceを指定すると、ReactElement自体ではなく、URL、screenKey、containerName、navigationTitleなどの直列化可能なメタデータのみがストレージに保存されます。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は、targetComponentを直接作成する必要がなく、URLのみを受け取ります。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を基準に動作します。