Geneste lay-outs in NextJS

Zoals je weet, bevindt zich in de map /app in het bestand /layout.jsx de hoofdlay-out van de website.

Indien gewenst, kunnen er echter in geneste mappen eigen lay-outs worden gemaakt. In dat geval wordt de inhoud van de pagina eerst in de geneste lay-out geplaatst, en vervolgens wordt het resulterende resultaat in de hoofdlay-out geplaatst.

Laten we het in de praktijk proberen. Stel dat onze hoofdlay-out er als volgt uitziet:

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

Laten we nog een, geneste lay-out maken voor alle inhoud uit de map /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      message for all users
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Zoals je ziet, specificeren we in deze lay-out niet de hoofdtags van de pagina, omdat deze al in onze hoofdlay-out van de website aanwezig zijn.

Laten we ook een bestand met inhoud maken om de gebruiker te tonen:

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

Na deze manipulaties zal onze bestands- structuur er als volgt uitzien:

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

Nu, als we de corresponderende URL bezoeken, zal NextJS alles samenvoegen en in de browser krijgen we de volgende uiteindelijke HTML-code:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>