Next.js 16+ · Component

Head

next/head adds page-specific elements to the HTML head in the Pages Router. It is deprecated for App Router usage, where the built-in Metadata API replaces it.

How it works

next/head is a Pages Router component that contributes elements such as titles and metadata to the HTML head. It is not the App Router approach: App Router projects should use Next.js built-in SEO support through the Metadata API.

Syntax

import Head from 'next/head'

Returns

Rendered head elements are added to the document head while the component is mounted.

Key points

Import Head from next/head and place page-specific head elements inside it.
Use key to deduplicate repeated head tags; title and base receive automatic duplicate checking.
A page should declare all head entries it needs because entries from an unmounted page are removed.
Head recognizes direct children and only one wrapper level of fragments or arrays.
The component manages head elements, not attributes or content belonging to the html or body elements.

Common mistakes

Keep head elements as direct children, or put them inside at most one React Fragment or array level, so client-side navigation detects them.
Use the appropriate document or layout mechanism for html and body attributes; Head only manages elements inside the HTML head.

Example: Using Head in the Pages Router

import Head from 'next/head'

export default function Page() {
  return (
    <>
      <Head>
        <title>My page title</title>
        <meta name="description" content="A page description" />
      </Head>
      <main>Content</main>
    </>
  )
}

This Pages Router component adds page-specific elements to the document head. In the App Router, use the Metadata API instead.

When to use it

Set page metadata

A Pages Router page needs a route-specific title or description.

Deduplicate tags with keys

Several components contribute equivalent head tags on one page.

Maintain existing Pages Router metadata

A legacy Pages Router application is being maintained during migration.

Interview questions

QWhat is the purpose of the next/head component?

Head is a Pages Router component imported from next/head. It lets a page contribute elements such as title and meta to the HTML head.

Follow-up: How does this differ in the App Router? Use the built-in Metadata API rather than next/head.

QHow does Head behave during page navigation?

The component collects its rendered head elements and removes them when the component unmounts. Therefore, each page should fully describe the head entries it requires instead of relying on another page's entries.

Follow-up: What can happen if a page assumes a previous page populated the head? Its required metadata may be absent after navigation because prior contents are cleared.

QHow can duplicate head tags be prevented?

Duplicate tags can be avoided with the key property. Next.js already checks title and base elements for duplicates, so those two tags do not need keys for this purpose.

Follow-up: When should a key be added? Add one when multiple matching head elements could otherwise be rendered and should be deduplicated.

Metadata API
next/script
App Router migration
Pages Router

Source: Components: Head | Next.js. Checked 2026-10-15.