Next.js Templates

Templates Remount, Layouts Persist

Both layout.tsx and template.tsx wrap a route's children with shared UI, and both accept the same children prop. The difference is purely about React's reconciliation: navigating between two routes that share a layout.tsx reuses that layout's existing component instance, while navigating between two routes that share a template.tsx always creates a fresh instance, resetting any local state and re-running effects.

This makes templates useful for the rare cases where you specifically want per-navigation behavior — such as re-triggering an entrance animation on every page change, or resetting form state that a layout would otherwise incorrectly preserve.

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

Because this is a template.tsx, the fade-in wrapper (and its animation) restarts every time you navigate between routes under /blog.

Template Component Signature

export default function Template({
  children,
}: {
  children: React.ReactNode;
}) {
  return <>{children}</>;
}

• The function signature is identical to a layout's — only the filename (template.tsx) and remounting behavior differ.
• A route segment can have both a layout.tsx and a template.tsx at the same time.
• When both exist, the layout wraps the template, which then wraps the page.
• Templates are far less commonly needed than layouts — most routes never need one.

Templates vs. Layouts Cheat Sheet

The one meaningful difference and its practical effects.

When You Actually Need a Template

Reach for a template only when a layout's state-preserving behavior is actively wrong for your use case — most UI, including sidebars, navigation, and persistent widgets, wants a layout's default behavior.

• Per-page entrance/exit animations that should replay on every navigation.
• Resetting a useState-based form or wizard when moving between similar routes.
• Effects that must re-run on every navigation, like logging a page view with fresh timing.

Using a Layout and a Template Together

It's valid to have both files in the same route segment: the layout provides persistent chrome (like a sidebar), while the nested template resets or animates the content area on every navigation within that section.

app/
  dashboard/
    layout.tsx     // persistent sidebar (reused)
    template.tsx   // animated content wrapper (remounts)
    page.tsx

Common Mistakes

• Reaching for a template by default, when a layout's persistence is actually the desired, simpler behavior.
• Expecting a template to preserve scroll position or form input across navigation — it explicitly does not.
• Confusing template remounting with a full page reload — it's still a fast, client-side transition.
• Not realizing a layout and a template can coexist at the same route segment level.

Key Takeaways

• template.tsx behaves like a layout but creates a new instance on every navigation.
• State and effects inside a template reset on every navigation; layouts preserve them.
• Templates are useful for per-navigation animations or intentionally resetting local state.
• A route segment can have both a layout.tsx and a template.tsx simultaneously.
• Templates are a specialized tool — default to layouts unless you have a specific reason not to.