Pesastatud maketid NextJS-is

Nagu te teate, asub kaustas /app failis /layout.jsx veebisaidi põhimakett.

Soovi korral saab aga pesastatud kaustades luua ka omad maketid. Sel juhul sisestatakse lehe sisu kõigepealt pesastatud maketti, seejärel sisestatakse saadud tulemus põhimaketti.

Proovime seda praktikas. Oletame, et meie põhimakett näeb välja järgmine:

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

Teeme veel ühe, pesastatud maketi kõigile sisu jaoks kaustast /users:

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

Nagu näete, siis selles maketis me ei määra lehe põhismärgendeid, kuna need on juba meie saidi põhimaketis.

Teeme ka faili kasutaja kuvamise sisuga:

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

Pärast neid manipuleerimisi näeb meie faili struktuur välja selline:

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

Nüüd, kui minna vastavale URL-ile, koostab NextJS kõik kokku ja brauseris saame järgmise lõpliku HTML-koodi:

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>