Вгнездени layout-и во NextJS

Како што знаете, во папката /app во датотеката /layout.jsx се наоѓа главниот layout на веб-страницата.

Доколку сакате, сепак, во вгнездените папки може да креирате свои layout-и. Во овој случај, содржината на страницата прво ќе се вметне во вгнездениот layout, а потоа добиениот резултат ќе се вметне во главниот layout.

Ајде да пробаме во пракса. Нека нашиот главен layout има следниот изглед:

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

Ајде да направиме уште еден, вгнезден layout за сите содржини од папката /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      порака за сите корисници
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Како што можете да видите, во овој layout не ги наведуваме основните тагови на страницата, бидејќи тие веќе се присутни во нашиот главен layout на страницата.

Ајде да направиме и датотека со содржина за приказ на корисник:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Корисник</h1>
    <p>
      опис на корисникот
    </p>
  </>;
}

По овие манипулации, нашата датотечна структура ќе изгледа вака:

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

Сега, ако пристапиме до соодветниот URL, NextJS ќе ги собере сите заедно и во прелистувачот ќе го добиеме следниот конечен HTML код:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        порака за сите корисници
      </div>
      
      <h1>Корисник</h1>
      <p>
        опис на корисникот
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>