`template.js` vs `layout.js`: When State Should Reset

A Next.js template.js file and a layout.js file both wrap a page with shared UI, but they behave differently across navigation. A layout renders once and stays mounted, keeping its state, while a template remounts every time the segment it belongs to changes.

App.tsx

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="blog-shell">{children}</div>;
}

Navigating between two posts under this layout keeps the layout mounted the whole time. Any state inside it, such as a scroll position tracked in a Client Component, survives the navigation.

What changes with a template

Swap that same file for a template.tsx, and Next.js gives it a unique key tied to its segment. Navigating to a different route inside that segment remounts the template and everything inside it.

App.tsx

// app/blog/template.tsx
export default function BlogTemplate({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="blog-shell">{children}</div>;
}

The markup looks identical to the layout version, but the behavior does not. A Client Component holding local state inside this template resets that state on every navigation between blog posts, because React treats each navigation as a fresh mount.

Where a template sits in the hierarchy

A template renders between a layout and the page, wrapping loading.tsx, error.tsx, and not-found.tsx in the same segment. Having both files at once is valid: the layout still persists, while the template inside it still remounts on navigation.

This ordering also changes how loading fallbacks behave. A Suspense fallback inside a layout only shows on the very first load of that segment, but the same fallback inside a template shows again on every navigation, since the template itself remounts each time. For the difference between not-found handling at the segment level versus the whole app, see not-found.js vs global-not-found.js.

When the reset actually matters

A common real case is an input field that should clear itself every time a visitor moves to a new item in a list. A layout would leave stale text sitting in the field; a template clears it automatically because the input remounts.

Common mistake

Reaching for a template by default is a common mistake, since the remount behavior has a real cost: every Client Component inside it rebuilds its DOM and loses state on each navigation, even state a visitor would expect to persist, like an open dropdown. Start with a layout, and only switch to a template once a specific reset requirement shows up. For the full rules on how layouts nest and share data with pages, see layouts in Next.js.