Le shell de mise en page

Un layout.tsx enveloppe chaque page avec une barre latérale et un en-tête — le chrome qui donne l'impression d'une vraie application.

Tout dossier PRISM peut contenir un layout.tsx qui enveloppe les pages qu'il contient. Un layout situé à src/app/layout.tsx enveloppe toute l'application — l'endroit idéal pour le chrome qui apparaît sur chaque écran : la barre latérale et l'en-tête. La page en cours de rendu arrive sous forme de children.

src/app/layout.tsx

export default function Layout({ children, route }) {
  return (
    <html lang="en">
      <head><style>{STYLES}</style></head>
      <body>
        <div className="app">
          <aside className="side">{/* sidebar */}</aside>
          <div className="main">
            <header className="hd" />
            <div className="ct">{children}</div>
          </div>
        </div>
      </body>
    </html>
  );
}

Les styles résident dans une chaîne CSS ordinaire importée depuis ./styles et insérée dans une balise <style> — aucune étape de build. Ouvrez src/app/layout.tsx dans l'arborescence de fichiers pour voir le shell complet.

ASTUCE

Comme le layout est propriétaire du chrome, vos pages restent légères — elles ne rendent que le contenu propre à cette route. L'aperçu montre désormais le shell qui enveloppe le tableau de bord.