template.js

A template.js looks exactly like a layout — default export, children prop — but Next.js 10,514 gives it a key derived from the matched segment. When that key changes, React 7,897 unmounts the old subtree and mounts a new one. A segment holding both files renders as <Layout><Template key={routeParam}>{children}</Template></Layout>: the template sits between the layout and its children, and the key is supplied by the framework.

The practical difference is state. A counter rendered by a layout keeps its value across navigations inside that layout; the same counter in a template is thrown away and recreated. The demo has both, in app/notes/layout.js and app/notes/template.js:

import Counter from '../_lib/counter'
export default function NotesTemplate({ children }) {
  return (
    <div>
      <Counter label="template" />
      {children}
    </div>
  )
}

Loading /notes/1, clicking each counter three times, then following the link to /notes/2 gives:

at /notes/1 : layout: 0 / template: 0
after 3 clicks each: layout: 3 / template: 3
soft nav to /notes/2 : layout: 3 / template: 0

Reach for a template when a reset is what you want: re-running an entry animation, restarting a useEffect that opens a connection, clearing a search box between products, or forcing a Suspense fallback to appear on every navigation instead of only the first. Everything else belongs in a layout, because remounting costs a full client render of the subtree. Templates remount only when their own segment level changes, dynamic parameters included; navigating deeper does not remount a higher template, and the query string never does.