Contenido en el diseño del sitio en NextJS

Consideremos el diseño principal del sitio, que comenzamos a analizar en la lección anterior:

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

Como puedes ver, el diseño del sitio es un componente con una función. Al mismo tiempo, un objeto se pasa al parámetro de la función, del cual extraemos la clave children en la variable correspondiente. En esta variable se almacena el contenido del archivo page.jsx, que corresponde a la URL solicitada.

Es decir, en el archivo layout.jsx se almacena el diseño del sitio, y mediante la variable children indicamos el lugar en el diseño del sitio en el que debe insertarse el contenido de la página.

Por ejemplo, vamos a envolver el contenido de la página en alguna etiqueta:

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