Enrutador de páginas: Metadatos

¿Qué pasa si queremos modificar los metadatos de la página, como la etiqueta HTML <title>?

<title> es parte de la etiqueta HTML <head>, así que veamos cómo podemos modificar la etiqueta <head> en una página de Next.js.

Abre pages/index.js en tu editor y encuentra las siguientes líneas:

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

Observa que se usa <Head> en lugar de <head> en minúsculas. <Head> es un componente de React integrado en Next.js que te permite modificar el <head> de una página.

Puedes importar el componente Head desde el módulo next/head.

Agregar `Head` a `first-post.js`

No hemos agregado un <title> a nuestra ruta /posts/first-post. Vamos a añadirlo.

Abre el archivo pages/posts/first-post.js y agrega una importación para Head desde next/head al principio del archivo:

import Head from 'next/head';

Luego, actualiza el componente exportado FirstPost para incluir el componente Head. Por ahora, solo agregaremos la etiqueta title:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Volver al inicio</Link>
      </h2>
    </>
  );
}

Intenta acceder a http://localhost:3000/posts/first-post. Ahora la pestaña del navegador debería mostrar "First Post". Usando las herramientas de desarrollador de tu navegador, deberías ver que la etiqueta title se ha agregado al <head>.

Para aprender más sobre el componente Head, consulta la referencia de API para next/head.

Si deseas personalizar la etiqueta <html>, por ejemplo para agregar el atributo lang, puedes hacerlo creando un archivo pages/_document.js. Más información en la documentación de Document personalizado.

Metadatos

Agregar Head a first-post.js

On this page

Agregar `Head` a `first-post.js`