Sisäkkäiset asettelut NextJS:ssä

Kuten tiedät, kansiossa /app tiedostossa /layout.jsx sijaitsee sivuston pääasettelu.

Haluttaessa voidaan kuitenkin sisäkkäisissä kansioissa luoda omia asetteluja. Tällöin sivun sisältö lisätään ensin sisäkkäiseen asetteluun, ja saatava tulos lisätään sitten pääasetteluun.

Kokeillaan käytännössä. Olkoon pääasettelumme seuraavan näköinen:

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

Tehdään toinen, sisäkkäinen asettelu kaikille sisällöille kansiosta /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      viesti kaikille käyttäjille
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Kuten näet, tässä asettelussa emme määritä sivun perustageja, koska ne ovat jo sivustomme pääasettelussa.

Tehdään myös tiedosto käyttäjän näyttämisen sisällölle:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Käyttäjä</h1>
    <p>
      käyttäjän kuvaus
    </p>
  </>;
}

Näiden toimenpiteiden jälkeen tiedostorakenteemme näyttää tältä:

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

Nyt, jos siirrytään vastaavaan URL-osoitteeseen, NextJS kokoaa kaiken yhteen ja selaimessa saamme seuraavan lopullisen HTML-koodin:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        viesti kaikille käyttäjille
      </div>
      
      <h1>Käyttäjä</h1>
      <p>
        käyttäjän kuvaus
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>