Përmbajtja në Layout të Faqes në NextJS

Le të shqyrtojmë layout-in bazë të faqes, të cilin e filluam të shqyrtojmë në mësimin e kaluar:

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

Siç e shihni, layout-i i faqes përfaqëson një komponent me funksion. Në të njëjtën kohë në parametrin e funksionit i transmetohet një objekt, nga i cili nxjerrim çelësin children në variablin përkatës. Në këtë variabël ruhet përmbajtja e skedarit page.jsx, i cili i përgjigjet URL-së së kërkuar.

Domethënë në skedarin layout.jsx tek ne ruhet layout-i i faqes, ndërsa me ndihmën e variablit children ne tregojmë vendin në layout-in e faqes, në të cilin duhet të futet përmbajtja e faqes.

Për shembull le të formatizojmë përmbajtjen e faqes në ndonjë tag:

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