Agregar un componente contenedor a su aplicación Next.js

Cómo usar un componente contenedor y agregarle una barra lateral o encabezado común

Todas las páginas de su sitio se ven más o menos iguales. Hay un cromo, una capa base común, y solo quieres cambiar lo que hay dentro.

Hay una barra de navegación, una barra lateral y luego el contenido real.

¿Cómo se construye dicho sistema en Next.js?

Hay dos formas. Uno está usando unComponente de orden superior, creando uncomponents/Layout.jscomponente:

export default Page => {
  return () => (
    <div>
      <nav>
        <ul>....</ul>
      </nav>
      <main>
        <Page />
      </main>
    </div>
  )
}

Allí podemos importar componentes separados para el encabezado y / o la barra lateral, y también podemos agregar todo el CSS que necesitemos.

Y lo usas en cada página como esta:

import withLayout from '../components/Layout.js'

const Page = () => <p>Heres a page!</p>

export default withLayout(Page)

Pero encontré que esto funciona solo para casos simples, donde no es necesario llamargetInitialProps()en una página.

¿Por qué?

PorquegetInitialProps()solo se llama en el componente de página. Pero si exportamos el componente de orden superior withLayout () desde una página,Page.getInitialProps()no se llama.withLayout.getInitialProps()haría.

Para evitar complicar innecesariamente nuestra base de código, el enfoque alternativo es usar accesorios:

export default props => (
  <div>
    <nav>
      <ul>....</ul>
    </nav>
    <main>
      {props.content}
    </main>
  </div>
)

y en nuestras páginas ahora lo usamos así:

import Layout from '../components/Layout.js'

const Page = () => ( <Layout content={( <p>Heres a page!</p> )} /> )

Este enfoque nos permite usargetInitialProps()desde dentro de nuestro componente de página, con la única desventaja de tener que escribir el componente JSX dentro delcontentapuntalar:

import Layout from '../components/Layout.js'

const Page = () => ( <Layout content={( <p>Heres a page!</p> )} /> )

Page.getInitialProps = ({ query }) => { //… }

Descarga mi gratisManual de Next.js


Más próximos tutoriales: