Next.js: rellene la etiqueta principal con etiquetas personalizadas

Cómo personalizar elheadetiqueta de su aplicación Next.js

Desde cualquier componente de la página Next.js, puede agregar información al encabezado de la página.

Esto es útil cuando:

  • quieres personalizar el título de la página
  • quieres cambiar una metaetiqueta

¿Cómo puedes hacerlo?

Dentro de cada componente puede importar elHeadcomponente denext/heade inclúyalo en la salida JSX de su componente:

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

Puede agregar cualquier etiqueta HTML que desee que aparezca en el<head>sección de la página.

Al montar el componente, Next.js se asegurará de que las etiquetas dentroHeadse agregan al encabezado de la página. Lo mismo al desmontar el componente, Next.js se encargará de eliminar esas etiquetas.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: