Next.js: remplissez la balise head avec des balises personnalisées

Comment personnaliser leheadbalise de votre application Next.js

À partir de n'importe quel composant de page Next.js, vous pouvez ajouter des informations à l'en-tête de page.

Ceci est pratique lorsque:

  • vous souhaitez personnaliser le titre de la page
  • vous souhaitez modifier une balise Meta

Comment pouvez-vous faire cela?

À l'intérieur de chaque composant, vous pouvez importer leHeadcomposant denext/headet incluez-le dans la sortie JSX de votre composant:

import Head from 'next/head'

const House = props => ( <div> <Head> <title>The page title</title> </Head> {/* the rest of the JSX */} </div> )

export default House

Vous pouvez ajouter n'importe quelle balise HTML que vous souhaitez voir apparaître dans le<head>section de la page.

Lors du montage du composant, Next.js s'assurera que les balises à l'intérieurHeadsont ajoutés à l'en-tête de la page. Idem lors du démontage du composant, Next.js se chargera de supprimer ces balises.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: