logoNext.js
DocumentaciónBlogAprender
Introducción/Referencia de la API/Componentes/Head

Head

Exponemos un componente integrado para añadir elementos al head de la página:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

Evitar etiquetas duplicadas

Para evitar etiquetas duplicadas en su head, puede usar la propiedad key, que asegurará que la etiqueta solo se renderice una vez, como en el siguiente ejemplo:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

En este caso solo se renderiza el segundo <meta property="og:title" />. Las etiquetas meta con atributos key duplicados se manejan automáticamente.

Nota importante: Las etiquetas <title> y <base> son verificadas automáticamente por duplicados por Next.js, por lo que no es necesario usar key para estas etiquetas.

El contenido de head se borra al desmontar el componente, así que asegúrese de que cada página defina completamente lo que necesita en head, sin asumir lo que otras páginas hayan agregado.

Usar anidación mínima

title, meta o cualquier otro elemento (ej. script) deben estar contenidos como hijos directos del elemento Head, o envueltos en un máximo de un nivel de <React.Fragment> o arrays; de lo contrario, las etiquetas no se detectarán correctamente en las navegaciones del lado del cliente.

Usar next/script para scripts

Recomendamos usar next/script en su componente en lugar de crear manualmente un <script> en next/head.

No usar etiquetas html o body

No puede usar <Head> para establecer atributos en las etiquetas <html> o <body>. Esto resultará en un error next-head-count is missing. next/head solo puede manejar etiquetas dentro de la etiqueta HTML <head>.

Formulario

Aprenda a utilizar el componente `<Form>` para manejar envíos de formularios y actualizaciones de parámetros de búsqueda con navegación del lado del cliente.

Image

Optimiza imágenes en tu aplicación Next.js utilizando el componente integrado `next/image`.

On this page