How is the final <title> formed?

Next.jsMiddle~1 min read

The final <title> in Next.js is formed step by step, following the layout and page hierarchy, top to bottom. Next.js collects all title definitions and computes one final value from them, which goes into <head>.

In other words:

<title> is the result of combining Root Layout → nested layouts → the page.

The basic principle

First, the title from the Root Layout is taken into account
Then, from the nested layouts
Finally, from the page
If there is a template, it is applied at the last step

The lower the file is in the route structure, the higher its priority.

The simplest case

// app/page.tsx
export const metadata = {
  title: 'Home'
}

Result:

html

<title>Home</title>

No templates or inheritance.

A title with a template in the layout

// app/layout.tsx
export const metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site'
  }
}

// app/blog/page.tsx
export const metadata = {
  title: 'Blog'
}

Result:

html

<title>Blog | My Site</title>

Here:

'Blog' → %s
'My Site' → from the layout's template

If the page didn't set a title

// app/layout.tsx
export const metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site'
  }
}

// app/blog/page.tsx
export const metadata = {}

Result:

html

<title>My Site</title>

The default is used.

Several nested layouts

txt

app/
 ├─ layout.tsx
 └─ dashboard/
     ├─ layout.tsx
     └─ page.tsx

// app/layout.tsx
export const metadata = {
  title: {
    template: '%s | My Site',
    default: 'My Site'
  }
}

// app/dashboard/layout.tsx
export const metadata = {
  title: 'Dashboard'
}

// app/dashboard/page.tsx
export const metadata = {
  title: 'Settings'
}

Result:

html

<title>Settings | My Site</title>

Why this happens:

the page sets a specific title
the layout sets the context
the Root Layout applies the template

Dynamic metadata and title

export async function generateMetadata({ params }) {
  return {
    title: `Post: ${params.slug}`
  }
}

If a template exists above, the result will be, for example:

html

<title>Post: nextjs | My Site</title>

Dynamic and static metadata take part in forming the <title> the same way; there's no difference in the logic.

Key rules

there is always exactly one <title>
priority: page → layout → root layout
template is applied at the very end
default is used if no title is set below
Next.js itself tracks the order and duplicates

In short

The final <title> is:

the result of metadata inheritance
accounting for templates
assembled according to the route structure
without manually managing <head>

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.