Tela Dividida de URL do Next.js

v1.0.0

No Next.js App Router, especifique apenas a URL para renderizar o page.tsx no servidor e arraste para um novo painel do FlexLayoutSplitScreen.

Fluxo de operação

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.

text

1. Criar Registro

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.

scripts/generateFlexLayoutSplitScreenPageRegistry.mjs

2. Aplicar FlexLayoutNextSplitScreen.

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.

tsx

3. Restauração de atualização do painel de URL.

O alvo de restauração é apenas o painel de URL do Next que pode ser recriado.

Inclui apenas painéis que estão envolvidos em FlexLayoutNextSplitScreen, que têm DragBox exclusivo para Next.js, que não especificam targetComponent diretamente e que não usam iframe no snapshot persistente. O método targetComponent não impede a renderização normal, mas é excluído da restauração de atualização.

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.

tsx

4. O DragBox só recebe a URL

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.

tsx

5. iframe é opcional

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.

tsx

Restrições do contexto do roteador

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.