Vnorené layouty v NextJS

Ako viete, v priečinku /app v súbore /layout.jsx sa nachádza hlavný layout stránky.

V prípade potreby je však možné v podpriečinkoch vytvoriť vlastné layouty. V takom prípade sa obsah stránky najprv vloží do vnoreného layoutu a výsledok sa následne vloží do hlavného layoutu.

Vyskúšajme si to v praxi. Predpokladajme, že náš hlavný layout vyzerá nasledovne:

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

Vytvorme ďalší, vnorený layout pre všetky obsahy z priečinka /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      správa pre všetkých používateľov
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Ako vidíte, v tomto layoute neuvádzame základné štruktúrne tagy stránky, pretože sú už obsiahnuté v hlavnom layoute stránky.

Vytvorme tiež súbor s obsahom pre zobrazenie používateľa:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Používateľ</h1>
    <p>
      popis používateľa
    </p>
  </>;
}

Po týchto úpravách bude naša štruktúra súborov vyzerať nasledovne:

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

Teraz, pri prístupu na príslušnú URL adresu, NextJS všetko zloží dohromady a v prehliadači dostaneme nasledujúci výsledný HTML kód:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        správa pre všetkých používateľov
      </div>
      
      <h1>Používateľ</h1>
      <p>
        popis používateľa
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>