Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке template.tsx у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`template.tsx`** у Next.js обгортає дочірні сторінки як layout, але **розмонтується і монтується заново** при кожній навігації, і за замовчуванням є **Server Component**. **Ключове:** на відміну від `layout.tsx`, `template.tsx` не зберігається між переходами і не зберігає стан - тому підходить для анімацій переходів, скидання стану та покрокових флоу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке `template.tsx` У **Next.js** `template.tsx`: - обгортає дочірні сторінки **як layout** - **АЛЕ розмонтується і монтується заново** при кожній навігації - за замовчуванням **Server Component** ## Головна відмінність: layout vs template | | `layout.tsx` | `template.tsx` | |---|---|---| | Обгортає `children` | Так | Так | | Зберігається між переходами | Так | Ні | | Розмонтується при навігації | Ні | **Так** | | Зберігає стан | Так | Ні | | Підходить для shell UI | Так | Ні | --- ## Приклад структури ```txt app/dashboard/ ├─ layout.tsx ├─ template.tsx ├─ page.tsx └─ settings/page.tsx ``` Порядок рендеру: ``` layout → template → page ``` При переході: ``` /dashboard → /dashboard/settings ``` - `layout` лишається - `template` **пересоздається** - `page` змінюється --- ## Мінімальний приклад ```tsx // app/blog/template.tsx export default function BlogTemplate({ children, }: { children: React.ReactNode; }) { return <div className="animate-fade-in">{children}</div>; } ``` Кожен перехід всередині `/blog/*`: - заново змонтує template - перезапустить анімацію --- ## Коли ПОТРІБЕН `template.tsx` ### 1. Анімації переходів ```txt tabs / wizard / onboarding ``` - потрібно щоразу перезапускати анімацію --- ### 2. Скидання стану ```txt forms / editors / filters ``` - перехід = чистий аркуш --- ### 3. Модальні флоу / кроки ```txt step1 → step2 → step3 ``` - кожен крок заново ініціалізується --- ### 4. SEO / експерименти - потрібно перерахувати контент при кожному заході --- ## Коли НЕ потрібен - хедер / сайдбар - таби, які повинні зберігати стан - layout shell - глобальний контекст Для цього **layout.tsx** --- ## Важливий нюанс про Client Components Якщо `template.tsx` - client: ```tsx "use client"; ``` - увесь його state **втрачається при навігації** - навіть між сусідніми сторінками Це **фіча**, не баг.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.