Що таке template.tsx у Next.js?

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

Що таке `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>;
}