Écran partagé URL Next.js

Le FlexLayout standard gère la mise en page et le redimensionnement comme auparavant, tandis que la division dynamique est gérée par FlexLayoutSplitScreen. Le point d'entrée spécifique à Next.js interprète l'URL de DragBox comme un registre généré, rend le page.tsx sur le serveur, puis transmet le résultat au panneau partagé correspondant.

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

Configurez uniquement le chemin de l'application et le chemin de sortie en haut du script du projet utilisé. Le résultat de la création est un registre d'importation statique capable d'interpréter le groupe de routes et le segment dynamique, et l'exportation par défaut est 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 est un wrapper spécifique à Next.js qui fournit le rendu côté serveur du panneau URL en utilisant le registre de page généré. Il suffit d'envelopper une fois l'arbre FlexLayoutSplitScreen qui reçoit le panneau basé sur l'URL.

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>

Si vous spécifiez la persistance, seules les métadonnées sérialisables comme l'URL, screenKey, containerName, navigationTitle, et la structure de partition sont stockées. Si restoreOnReload est faux, la persistance n'est pas utilisée, et si syncWithBrowserUrl est vrai, un instantané par URL est enregistré. Lors de la navigation arrière/avant ou de la revisite de la même URL, l'état de partition complet basé sur cette URL est restauré, et lors du rafraîchissement, l'instantané de l'URL actuelle est également restauré.

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

Le DragBox spécifique à Next.js ne nécessite pas de créer directement targetComponent, il reçoit uniquement l'URL. Si targetComponent est spécifié, la méthode existante prévaut et ce panneau est exclu des cibles de persistance.

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>

La valeur par défaut de l'iframe est false. Spécifiez true pour l'iframe uniquement si une URL externe ou un contexte de document indépendant est nécessaire. Le mode iframe n'a pas besoin du registre de pages de FlexLayoutNextSplitScreen et est également exclu des cibles de persistance.

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

Les pages serveur reçoivent les params et searchParams extraits de l'URL. Cependant, le panneau partagé n'est pas un Next Router séparé, donc les usePathname, useParams et useSearchParams du composant client interne fonctionnent en fonction de l'URL réelle du navigateur.