Як формується підсумковий <title>?

Next.jsMiddle~1 хв читання

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

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

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

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

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

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

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

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

Результат:

html

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

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

Title з шаблоном у layout

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

// app/blog/page.tsx
export const metadata = {
  title: 'Блог'
}

Результат:

html

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

Тут:

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

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

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

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

Результат:

html

<title>My Site</title>

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

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

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

Результат:

html

<title>Settings | My Site</title>

Чому так:

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

Dynamic metadata і title

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>

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.