Кантэнт у макеце сайта ў 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>
  );
}