Կոնտենտը կայքի դասավորության մեջ 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>
  );
}