Макети та шаблони в Next.js

У маршрутизаторі Next.js макети та шаблони визначають спільну структуру сторінок. Макет обгортає дочірні сторінки та зберігає свій стан під час навігації. Шаблон робить те ж саме, але відтворюється при кожному переході.

Макети

Макет — це компонент, спільний для кількох сторінок. Під час навігації між дочірніми сторінками макет не перезавантажується і зберігає стан:

tsx

// app/layout.tsx (кореневий макет)
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  )
}

Кореневий макет є обов'язковим і повинен містити теги <html> та <body>.

Вкладені макети

Макети можуть бути вкладеними. Кожен сегмент може мати свій власний макет:

app
layout.tsx
docs
layout.tsx
page.tsx
[slug]
page.tsx
problems
layout.tsx
page.tsx

tsx

// app/docs/layout.tsx
export default function DocsLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <div className="flex">
      <DocsSidebar />
      <div className="flex-1">{children}</div>
    </div>
  )
}

Коли користувач переходить між сторінками документації на IT Lead, бічна панель не перезавантажується. Це забезпечує плавний UX.

Збереження стану

Ключова властивість макету: під час навігації між дочірніми сторінками React не перезавантажує макет. Це означає:

стан useState зберігається
ефекти useEffect не запускаються знову
DOM не відтворюється

tsx

'use client'

// app/problems/layout.tsx
import { useState } from 'react'

export default function ProblemsLayout({
  children
}: {
  children: React.ReactNode
}) {
  const [filter, setFilter] = useState('all')

  return (
    <div>
      <FilterBar value={filter} onChange={setFilter} />
      {children}
    </div>
  )
}

Фільтр зберігатимся під час навігації між /problems/1 та /problems/2.

Шаблони

Шаблон працює як макет, але відтворюється при кожній навігації:

tsx

// app/docs/template.tsx
export default function DocsTemplate({
  children
}: {
  children: React.ReactNode
}) {
  return <div>{children}</div>
}

Коли використовувати шаблон замість макету

Анімації входу/виходу під час навігації
Логування переглядів сторінок (useEffect спрацьовує при кожному переході)
Скидання стану форми під час навігації між сторінками

Макет vs Шаблон

	Макет	Шаблон
Перезавантаження	Ні	Так, при кожній навігації
Стан (useState)	Зберігається	Скидається
useEffect	Не запускається знову	Запускається знову
DOM	Не відтворюється	Відтворюється

Спеціальні файли в сегменті

Макет обгортає інші спеціальні файли в певному порядку:

layout.tsx
  template.tsx
    error.tsx (React Error Boundary)
      loading.tsx (React Suspense)
        not-found.tsx
          page.tsx

Практична порада:

У більшості випадків використовуйте макет. Шаблон потрібен лише тоді, коли потрібно скинути стан або запустити ефекти під час навігації.

Корисні ресурси

nextjs.org/docs — Макети та Шаблони
layout.tsx API Reference

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

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

Premium

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

Дочитали статтю?

Практика завдань