Tela Dividida de URL do Next.js

O FlexLayout padrão lida com layout e redimensionamento como antes, enquanto a divisão dinâmica é gerenciada pelo FlexLayoutSplitScreen. O ponto de entrada exclusivo do Next.js interpreta a URL do DragBox como um registro gerado, renderiza o page.tsx no servidor e passa o resultado para o painel dividido correspondente.

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

Defina apenas o caminho do aplicativo e o caminho de saída no topo do script do projeto em uso. O resultado da geração é um registro de importação estática que pode interpretar grupos de rota e segmentos dinâmicos, e a exportação padrão é FlexLayoutNextSplitScreen.

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);
});

FlexLayoutNextSplitScreen. é um wrapper exclusivo para Next.js que fornece renderização do servidor para o painel de URL usando o registro de página gerado. Basta envolver a árvore FlexLayoutSplitScreen que receberá o painel baseado em URL uma vez.

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>

Se a persistência for especificada, apenas metadados serializáveis como URL, screenKey, containerName, navigationTitle e estrutura de divisão serão armazenados. Se restoreOnReload for falso, a persistência não será usada, e se syncWithBrowserUrl for verdadeiro, um snapshot baseado em pathname + search será salvo para cada URL. Ao navegar para trás/para frente ou revisitar a mesma URL, o estado completo baseado na URL será restaurado, e ao atualizar, o snapshot da URL atual será restaurado.

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

O DragBox exclusivo do Next.js só recebe a URL, sem necessidade de criar um targetComponent. Se um targetComponent for especificado, o método antigo terá prioridade e esse painel será excluído dos alvos de persistência.

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>

O valor padrão do iframe é falso. O iframe deve ser definido como verdadeiro apenas se uma URL externa ou um contexto de documento independente for necessário. O modo iframe não requer o registro de página do FlexLayoutNextSplitScreen e também é excluído dos alvos de persistência.

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

Na página do servidor, os params e searchParams extraídos da URL são passados. No entanto, o painel dividido não é um Next Router separado, então usePathname, useParams e useSearchParams do Client Component interno funcionam com base na URL real do navegador.