Capítulo 365 de 456

Head

Core Idea

next/head é o componente built-in do Pages Router para injetar elementos (title, meta, etc.) no <head> de cada página.

Key Concepts

  • Head: componente que aceita filhos e os move para o <head> do documento.
  • key prop: evita tags duplicadas — tags com o mesmo key se sobrescrevem, só a última renderiza.
  • Nesting mínimo: title/meta/script devem ser filhos diretos de <Head>, ou envolvidos em no máximo um nível de <React.Fragment>/array, senão não são detectados em navegações client-side.
  • Limpeza no unmount: o conteúdo do head é limpo ao desmontar o componente — cada página deve declarar tudo que precisa, sem depender do que outra página injetou.

Code Examples

import Head from 'next/head'

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

export default IndexPage
  • O que demonstra: uso básico para definir <title>.
<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>
  • O que demonstra: dois blocos <Head> com key="title" igual — só o segundo meta é renderizado, evitando duplicata.

Anti-patterns

  • Usar <Head> para atributos de <html> ou <body>: gera erro next-head-count is missing; next/head só manipula conteúdo dentro de <head>.
  • Criar <script> manualmente dentro de next/head: preferir next/script (ver guia de Scripts) em vez disso.
  • Aninhar tags além de um nível de Fragment/array: quebra a detecção correta em navegações client-side.

Key Takeaways

  1. title e base já têm deduplicação automática pelo Next.js, sem precisar de key.
  2. meta com key duplicado é resolvido automaticamente, mantendo só a última ocorrência.
  3. Cada página é responsável por definir tudo que precisa em head (não há herança implícita entre páginas).
  4. Scripts devem usar next/script, não <script> cru dentro de Head.

Connects To

  • next/script: componente recomendado para scripts, em vez de tag <script> manual.
  • Custom App / Custom Document: pontos comuns onde <Head> é usado para metadata compartilhada.
AnteriorFormPróximoImage