Садржај у изгледу сајта у 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>
  );
}