Next.js URL Split Screen

일반 FlexLayout은 기존처럼 레이아웃과 리사이즈를 담당하고, 동적 분할은 FlexLayoutSplitScreen이 담당합니다. Next.js 전용 진입점은 DragBox의 url을 생성된 registry로 해석해 서버에서 page.tsx를 렌더링한 뒤 그 결과를 해당 split pane에 전달합니다.

사용 프로젝트의 스크립트 상단에 앱 경로와 출력 경로만 설정합니다. 생성 결과는 route group과 동적 segment를 해석할 수 있는 정적 import registry이며, 기본 export는 FlexLayoutNextSplitScreen입니다.

FlexLayoutNextSplitScreen 은 생성된 page registry를 이용해 URL pane의 서버 렌더링을 제공하는 Next.js 전용 wrapper입니다. URL 기반 pane을 받을 FlexLayoutSplitScreen 트리를 한 번 감싸면 됩니다.

persistence를 지정하면 ReactElement 자체가 아니라 URL, screenKey, containerName, navigationTitle, 분할 구조처럼 직렬화 가능한 metadata만 storage에 저장합니다. restoreOnReload가 false면 persistence를 사용하지 않고, syncWithBrowserUrl이 true면 pathname + search URL별 snapshot을 저장합니다. 뒤로가기/앞으로가기 또는 같은 URL 재방문 시 해당 URL의 전체 URL 기반 분할 상태를 복원하고, 새로고침 시에도 현재 URL snapshot을 복원합니다.

Next.js 전용 DragBox는 targetComponent를 직접 만들 필요 없이 url만 받습니다. targetComponent를 명시하면 기존 방식이 우선하며 해당 pane은 persistence 대상에서는 제외됩니다.

iframe의 기본값은 false입니다. 외부 URL이나 독립 문서 컨텍스트가 필요한 경우에만 iframe을 true로 지정합니다. iframe 모드는 FlexLayoutNextSplitScreen의 page registry가 필요하지 않으며 persistence 대상에서도 제외됩니다.

서버 page에는 URL에서 추출한 params와 searchParams가 전달됩니다. 다만 split pane은 별도의 Next Router가 아니므로 내부 Client Component의 usePathname, useParams, useSearchParams는 브라우저의 실제 URL을 기준으로 동작합니다.