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

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

使用プロジェクトのスクリプト上部にアプリパスと出力パスのみを設定します。生成結果はroute groupと動的segmentを解釈できる静的インポートレジストリであり、基本exportはFlexLayoutNextSplitScreenです。

FlexLayoutNextSplitScreen は生成されたページレジストリを利用してURLペインのサーバーレンダリングを提供するNext.js専用ラッパーです。URLベースのペインを受け取るFlexLayoutSplitScreenツリーを一度包む必要があります。

persistenceを指定すると、ReactElement自体ではなく、URL、screenKey、containerName、navigationTitleなどの直列化可能なメタデータのみがストレージに保存されます。restoreOnReloadがfalseの場合はpersistenceを使用せず、syncWithBrowserUrlがtrueの場合はpathname + searchのURLごとのスナップショットが保存されます。戻る/進むまたは同じURLを再訪問する際に、そのURLの全URLに基づく分割状態を復元し、新しく読み込む際にも現在のURLスナップショットを復元します。

Next.js専用のDragBoxは、targetComponentを直接作成する必要がなく、URLのみを受け取ります。targetComponentを指定すると、既存の方法が優先され、そのペインはpersistenceの対象から除外されます。

iframeのデフォルトはfalseです。外部URLや独立した文書コンテキストが必要な場合のみ、iframeをtrueに指定します。iframeモードはFlexLayoutNextSplitScreenのページレジストリを必要とせず、persistenceの対象からも除外されます。

サーバーページにはURLから抽出したparamsとsearchParamsが渡されます。ただし、スプリットペインは別のNext Routerではないため、内部Client ComponentのusePathname、useParams、useSearchParamsはブラウザの実際のURLを基準に動作します。