Sadržaj u izgledu sajta u NextJS

Razmotrimo osnovni izgled sajta, koji smo počeli da razmatramo u prethodnoj lekciji:

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

Kao što vidite, izgled sajta predstavlja komponentu sa funkcijom. Pri tome u parametar funkcije se prosleđuje objekat, iz koga izvlačimo ključ children u odgovarajuću promenljivu. U ovoj promenljivoj se čuva sadržaj fajla page.jsx, koji odgovara traženom URL-u.

To znači da u fajlu layout.jsx mi čuvamo izgled sajta, a pomoću promenljive children označavamo mesto u izgledu sajta, u koje treba da se umeće sadržaj stranice.

Za primer, hajde da oblikujemo sadržaj stranice u neki tag:

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