Template rendered at
2026-06-17T13:15:30.670Z — this stamp regenerates on every navigation, while the surrounding layout timestamp would be stable.template.tsx
template.tsx works like layout.tsx, but it remounts on every navigation. Use it for per-page effects (page-view pings, entry animations, fresh per-render state) where a stable layout would be wrong.
Tip
Unlike <code>layout.tsx</code> — which preserves state across navigations — <code>template.tsx</code> is instantiated fresh on every render. This is the right place to trigger an entry animation or reset a local counter without touching the global layout.
// src/app/examples/template-remount/template.tsx
export default function Template({ children }) {
const renderedAt = new Date().toISOString();
return (
<div>
<div>Template rendered at {renderedAt}</div>
{children}
</div>
);
}
// src/app/examples/template-remount/page.tsx
export default function Page() {
return <p>Page body — wrapped in template.tsx</p>;
}