Conteúdo no Layout do Site em NextJS

Vamos considerar o layout principal do site, que começamos a analisar na lição anterior:

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

Como você pode ver, o layout do site representa um componente com uma função. Ao mesmo tempo, um objeto é passado para o parâmetro da função, do qual extraímos a chave children para a variável correspondente. Nesta variável está armazenado o conteúdo do arquivo page.jsx, que corresponde ao URL solicitado.

Ou seja, no arquivo layout.jsx nós temos o layout do site armazenado, e com a ajuda da variável children indicamos o lugar no layout do site onde o conteúdo da página deve ser inserido.

Por exemplo, vamos colocar o conteúdo da página em alguma tag:

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