Contenuto nel layout del sito in NextJS

Consideriamo il layout principale del sito, che abbiamo iniziato ad analizzare nella lezione precedente:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

Come puoi vedere, il layout del sito rappresenta un componente con una funzione. Inoltre nell'parametro della funzione viene passato un oggetto, dal quale estraiamo la chiave children nella variabile corrispondente. In questa variabile è memorizzato il contenuto del file page.jsx, che corrisponde all'URL richiesto.

Cioè nel file layout.jsx abbiamo memorizzato il layout del sito, e tramite la variabile children indichiamo il punto nel layout del sito in cui deve essere inserito il contenuto della pagina.

Ad esempio, inseriamo il contenuto della pagina in qualche tag:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <main>
          {children}
        </main>
      </body>
    </html>
  );
}