Ajout d'un composant wrapper à votre application Next.js

Comment utiliser un composant wrapper et y ajouter une barre latérale ou un en-tête commun

Toutes les pages de votre site se ressemblent plus ou moins. Il y a un chrome, une couche de base commune, et vous voulez juste changer ce qu'il y a à l'intérieur.

Il y a une barre de navigation, une barre latérale, puis le contenu réel.

Comment construisez-vous un tel système dans Next.js?

Il y a 2 façons. L'un utilise unComposant d'ordre supérieur, en créant uncomponents/Layout.jscomposant:

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

Là, nous pouvons importer des composants séparés pour l'en-tête et / ou la barre latérale, et nous pouvons également ajouter tout le CSS dont nous avons besoin.

Et vous l'utilisez dans chaque page comme ceci:

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

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

export default withLayout(Page)

Mais j'ai trouvé que cela ne fonctionne que pour les cas simples, où vous n'avez pas besoin d'appelergetInitialProps()sur une page.

Pourquoi?

Parce quegetInitialProps()n'est appelé que sur le composant de page. Mais si nous exportons le composant d'ordre supérieur avec Layout () à partir d'une page,Page.getInitialProps()n'est pas appelé.withLayout.getInitialProps()aurait.

Pour éviter de compliquer inutilement notre base de code, l'approche alternative consiste à utiliser des accessoires:

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

et dans nos pages maintenant nous l'utilisons comme ceci:

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

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

Cette approche nous permet d'utilisergetInitialProps()à partir de notre composant de page, avec le seul inconvénient d'avoir à écrire le composant JSX à l'intérieur ducontentsoutenir:

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

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

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

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: