Content in the Site Layout in NextJS

Let's consider the main site layout, which we started to analyze in the previous lesson:

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

As you can see, the site layout is a component with a function. At the same time, an object is passed to the function parameter, from which we extract the key children into the corresponding variable. This variable contains the content of the file page.jsx, which corresponds to the requested URL.

That is, the file layout.jsx contains the site layout, and with the help of the variable children we specify the place in the site layout where the page content should be inserted.

As an example, let's wrap the page content in some tag:

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