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

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>Here’s 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>Here’s 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>Here’s a page!</p>
)} />
)
Page.getInitialProps = ({ query }) => {
//…
}

Plus de prochains tutoriels:

• Premiers pas avec Next.js
• Next.js vs Gatsby vs create-react-app
• Comment installer Next.js
• Lier deux pages dans Next.js à l'aide de Link
• Contenu dynamique dans Next.js avec le routeur
• Flux de données vers un composant Next.js à l'aide de getInitialProps
• Styliser les composants Next.js à l'aide de CSS
• Pré-extraire du contenu dans Next.js
• Utilisation du routeur pour détecter le lien actif dans Next.js
• Afficher la source pour confirmer que SSR fonctionne dans Next.js
• Next.js: remplissez la balise head avec des balises personnalisées
• Déployer une application Next.js maintenant
• Next.js: exécutez le code uniquement côté serveur ou côté client dans Next.js
• Déployer une application Next.js en production
• Comment analyser les bundles d'applications Next.js
• Modules de chargement paresseux dans Next.js
• Ajout d'un composant wrapper à votre application Next.js
• Les icônes ajoutées par Next.js à votre application
• Les offres groupées d'applications Next.js
• Comment utiliser le routeur Next.js
• Comment utiliser les routes d'API Next.js
• Comment obtenir des cookies côté serveur dans une application Next.js
• Comment changer le port d'une application Next.js