NextJS-те сайт макетіндегі контент

Сайттың негізгі макетін қарастырайық, оны біз өткен сабақта қарастыра бастадық:

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

Көріп отырғаныңыздай, сайт макеті функциясы бар компонентті білдіреді. Сонымен бірге функция параметріне объект беріледі, одан біз children кілтін сәйкес айнымалыға шығарамыз. Бұл айнымалыда сұралған URL-ге сәйкес келетін page.jsx файлының мазмұны сақталады.

Яғни layout.jsx файлында бізде сайт макеті сақталған, ал children айнымалысының көмегімен біз сайт макетіндегі бет контентінің енгізілуі керек орнын көрсетеміз.

Мысал ретінде бет контентін бір тегке орналастырайық:

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