Содржина во распоредот на веб-страницата во NextJS

Да го разгледаме основниот распоред на веб-страницата, кој почнавме да го разгледуваме во претходната лекција:

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

Како што можете да видите, распоредот на веб-страницата претставува компонента со функција. Притоа во параметарот на функцијата се пренесува објект, од кој го извлекуваме клучот children во соодветната променлива. Во оваа променлива се чува содржината на датотеката page.jsx, која одговара на побараниот URL.

Односно во датотеката layout.jsx кај нас се чува распоредот на веб-страницата, а со помош на променливата children ние означуваме место во распоредот на веб-страницата, во кое треба да се вметне содржината на страницата.

За пример ајде да ја оформме содржината на страницата во некоја таг:

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