Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як формується підсумковий <title>?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Підсумковий `<title>` у Next.js формується **покроково**, за ієрархією layout'ів і сторінки, зверху вниз.
Фреймворк **Next.js** збирає всі визначення `title` і на їхній основі обчислює **одне фінальне значення**, яке потрапить у `<head>`.

Простіше кажучи:

> `<title>` - це результат об'єднання Root Layout → вкладених layout'ів → сторінки.

---

## Основний принцип

1. Спочатку враховується `title` з **Root Layout**
2. Потім - з **вкладених layout'ів**
3. Наприкінці - зі **сторінки**
4. Якщо є шаблон (`template`), він застосовується на останньому кроці

Чим нижче файл у структурі маршруту - тим **вищий пріоритет**.

---

## Найпростіший випадок

```ts
// app/page.tsx
export const metadata = {
  title: 'Головна'
}
```

Результат:

```html
<title>Головна</title>
```

Без шаблонів і успадкування.

---

## Title з шаблоном у 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: 'Блог'
}
```

Результат:

```html
<title>Блог | My Site</title>
```

Тут:

- `'Блог'` → `%s`
- `'My Site'` → із шаблону layout'а

---

## Якщо сторінка не задала title

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

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

Результат:

```html
<title>My Site</title>
```

Використовується `default`.

---

## Кілька вкладених layout'ів

```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'
}
```

Результат:

```html
<title>Settings | My Site</title>
```

Чому так:

- сторінка задає конкретний title
- layout задає контекст
- Root Layout застосовує шаблон

---

## Dynamic metadata і title

```ts
export async function generateMetadata({ params }) {
  return {
    title: `Пост: ${params.slug}`
  }
}
```

Якщо вище є шаблон, результат буде, наприклад:

```html
<title>Пост: nextjs | My Site</title>
```

Dynamic і static metadata беруть участь у формуванні `<title>` **однаково** - різниці в логіці немає.

---

## Основні правила

- `<title>` завжди один
- пріоритет: **сторінка → layout → root layout**
- `template` застосовується в самому кінці
- `default` використовується, якщо нижче title не задано
- Next.js сам стежить за порядком і дублікатами

---

### Коротко

Підсумковий `<title>` - це:

- результат успадкування метаданих
- з урахуванням шаблонів
- зібраний за структурою маршруту
- без ручного керування `<head>`

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати413 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.