Шаблон страницы в NextJS

Макет в layout.jsx оборачивает дочерние страницы и при клиентской навигации остается смонтированным: локальное состояние внутри макета не обнуляется, пока пользователь ходит между дочерними маршрутами. Файл template.jsx в той же папке тоже оборачивает page.jsx, но React создает его заново на каждом переходе - как будто вы открыли другую страницу в новой оболочке.

Давайте положим рядом с макетом сегмента template.jsx и вынесем в него клиентский счетчик. При смене адреса значение будет сбрасываться, хотя общий макет выше по дереву продолжил бы жить со старым состоянием. Если увеличить счетчик на одной дочерней странице и перейти на соседнюю внутри /dashboard, число снова станет нулем. Тот же счетчик в layout.jsx этого сегмента сохранился бы между переходами. Шаблон удобен для анимации входа, сброса формы или эффекта, который должен запускаться заново при каждой смене страницы внутри области. Код файла будет таким:

'use client';

import { useState } from 'react';

export default function DashboardTemplate({ children }) {
	let [clicks, setClicks] = useState(0);
	
	return (
		<div>
			<p>Clicks in template: {clicks}</p>
			<button type="button" onClick={function () {
				setClicks(clicks + 1);
			}}>
				Increment
			</button>
			{children}
		</div>
	);
}

Добавьте шаблон в раздел отчетов и выведите в нем метку времени монтирования клиентского блока.

Сравните поведение: перенесите счетчик из шаблона в макет того же сегмента и убедитесь, что значение теперь не сбрасывается при переходах.