Layout Nidificati in NextJS

Come sai, nella cartella /app nel file /layout.jsx si trova il layout principale del sito.

Tuttavia, se lo si desidera, nelle cartelle nidificate è possibile creare layout propri. In questo caso, il contenuto della pagina verrà prima inserito nel layout nidificato, e poi il risultato ottenuto verrà inserito nel layout principale.

Proviamo nella pratica. Supponiamo che il nostro layout principale abbia il seguente aspetto:

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

Creiamo un altro layout nidificato per tutti i contenuti della cartella /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      messaggio per tutti gli utenti
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Come puoi vedere, in questo layout non specifichiamo i tag principali della pagina, poiché sono già presenti nel nostro layout principale del sito.

Creiamo anche un file con il contenuto per visualizzare l'utente:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Utente</h1>
    <p>
      descrizione utente
    </p>
  </>;
}

Dopo queste manipolazioni, la nostra struttura dei file diventerà così:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

Ora, se si accede all'URL corrispondente, NextJS metterà tutto insieme e nel browser otterremo il seguente codice HTML finale:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        messaggio per tutti gli utenti
      </div>
      
      <h1>Utente</h1>
      <p>
        descrizione utente
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>