How to set title in next.js

NextjsHow-ToBeginner · 3 min read

How to Set Page Title in Next.js Using Head Component

In Next.js, you set the page title by importing the Head component from next/head and placing a <title> tag inside it within your component. This updates the browser tab title dynamically for each page.

📐

Syntax

Use the Head component from next/head to add elements to the HTML <head> section. Inside Head, include a <title> tag with your desired page title.

import Head from 'next/head': imports the Head component.
<Head><title>Your Title</title></Head>: sets the page title.

jsx

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

💻

Example

This example shows a simple Next.js page that sets the browser tab title to "Welcome to My Site" using the Head component.

jsx

import Head from 'next/head';

export default function Home() {
  return (
    <>
      <Head>
        <title>Welcome to My Site</title>
      </Head>
      <main>
        <h1>Hello, Next.js!</h1>
        <p>This page has a custom title.</p>
      </main>
    </>
  );
}

Output

Browser tab shows title: "Welcome to My Site"

⚠️

Common Pitfalls

Common mistakes when setting the title in Next.js include:

Not importing Head from next/head, which causes errors.
Placing the <title> tag outside the Head component, so the title does not update.
Using multiple title tags on the same page without understanding that the last one wins.

Always wrap your <title> inside <Head> and import it correctly.

jsx

/* Wrong way: title outside Head */
export default function Wrong() {
  return (
    <>
      <title>Wrong Title</title> {/* This does nothing in Next.js */}
      <main>Content</main>
    </>
  );
}

/* Right way: title inside Head */
import Head from 'next/head';

export default function Right() {
  return (
    <>
      <Head>
        <title>Right Title</title>
      </Head>
      <main>Content</main>
    </>
  );
}

📊

Quick Reference

Import Head: import Head from 'next/head'
Set title: Wrap <title> inside <Head>
Multiple titles: The last <title> tag in the tree is used
Use for SEO: Setting titles improves search engine results and user experience

✅

Key Takeaways

Always import and use the Head component from next/head to set the page title.

Place the <title> tag inside <Head> to update the browser tab title correctly.

Avoid placing <title> outside Head as it will not work in Next.js.

Multiple <title> tags can be used, but the last one takes precedence.

Setting the title improves SEO and user experience by showing meaningful tab names.