Suggest an edit

Improve this article

Refine the answer for “How is the final <title> formed?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

1. First, the `title` from the **Root Layout** is taken into account
2. Then, from the **nested layouts**
3. Finally, from the **page**
4. 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

```ts
// 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

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

```ts
// 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

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

```ts
// 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
```

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

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

```ts
// 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

```ts
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>`

Markdown · drag & drop images · ⌘B / ⌘I shortcuts468 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.