Iegultie izkārtojumi NextJS

Kā jūs zināt, mapē /app failā /layout.jsx atrodas vietnes galvenais izkārtojums.

Vēloties, tomēr, iegultajās mapēs var izveidot savus izkārtojumus. Šajā gadījumā lapas saturs vispirms tiks ievietots iegultajā izkārtojumā, un pēc tam iegūtais rezultāts tiks ievietots galvenajā izkārtojumā.

Izmēģināsim praksē. Pieņemsim, ka mūsu galvenajam izkārtojumam ir šāds izskats:

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

Izveidosim vēl vienu, iegulto izkārtojumu visiem satiem no mapes /users:

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

Kā jūs redzat, šajā izkārtojumā mēs norādām lapas pamata tagus, tā kā tie jau atrodas mūsu vietnes galvenajā izkārtojumā.

Izveidosim arī failu ar saturu lietotāja attēlošanai:

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

Pēc šīm manipulācijām mūsu failu struktūra izskatīsies šādi:

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

Tagad, piekļūstot atbilstošajam URL, NextJS visu saliks kopā un pārlūkprogrammā mēs iegūsim šādu galīgo HTML kodu:

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>