Як працює app/layout.tsx в Next.js?

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

app/layout.tsx - це каркас (shell) інтерфейсу, який обгортає всі сторінки нижче по дереву і не розмонтовується при навігації. В App Router це один із ключових файлів.

Що таке `layout.tsx`

У Next.js кожен layout.tsx:

застосовується до всіх дочірніх сегментів
зберігається між переходами
може бути вкладеним
типово є Server Component

Базовий приклад

txt

app/
 ├─ layout.tsx        # глобальний layout
 ├─ page.tsx          # /
 └─ dashboard/
     ├─ layout.tsx    # layout для /dashboard/*
     └─ page.tsx      # /dashboard

Як він працює ментально

txt

URL → layout (root)
        ↓
      layout (segment)
        ↓
       page

При переході:

/dashboard → /dashboard/users

app/layout.tsx не розмонтовується
app/dashboard/layout.tsx не розмонтовується
змінюється лише page.tsx

Тому:

стан у layout зберігається
сайдбари / хедери не перемальовуються

Мінімальний `app/layout.tsx`

tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Root layout зобов'язаний:

повертати <html> та <body>
бути єдиним на проєкт

Вкладені layout'и

tsx

// app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

Застосується тільки до:

/dashboard
/dashboard/users
/dashboard/settings

Що layout НЕ робить

не створює URL не має доступу до params (якщо не сегментний) не перемальовується при навігації не повинен містити важку client-логіку без причини

Server vs Client layout

Server (типово, рекомендовано)

tsx

// без "use client"

можна робити await fetch
менше JS у браузері
краще SEO

Client layout

tsx

"use client";

можна useState, useEffect
Zustand, context
збільшує JS-бандл

Частий патерн:

layout - server
всередині підключати client-компоненти (Header, Sidebar)

Зв'язок з `loading.tsx`

txt

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

loading.tsx показується
layout залишається
змінюється лише page

Ідеально для skeleton'ів.

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

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

Premium

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