Per-navigation effects
A page-view effect should run again whenever the user navigates to another page under the template.
Next.js 16+ · Directive
template
Use template.tsx to wrap nested App Router content when each navigation should create a fresh component instance. Unlike layouts, templates reset descendant DOM, state, and effects as users move between routes that share the template.
How it works
An App Router template is a component exported from template.tsx that wraps the child layout or page. Unlike a layout, it receives a new instance on navigation, so its DOM, state, and effects are reset; it is rendered between the layout and its children.
Syntax
export default function Template({ children }: { children: React.ReactNode }) { return <div>{children}</div> }Parameters
| Name | Type | Description |
|---|---|---|
children | React.ReactNode | Nested layouts or pages rendered inside the template. |
Returns
A React element wrapping the nested route content.
Key points
- Export a default component whose children prop represents the nested route content.
- In the nesting order, the template sits after the layout and before the nested content.
- Shared-template navigations mount a new component instance instead of reusing the existing one.
- Navigation through a shared template recreates DOM nodes, discards component state, and re-runs effect synchronization.
- Use templates for route-specific effects or state that should restart when the user changes pages.
Common mistakes
- Use a template rather than a layout when navigation should create a fresh component instance; state is not preserved across those navigations.
- Suspense fallbacks inside templates can appear again on every navigation, unlike the behavior described for layouts.
Example: A remounting App Router template
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}Place this component in app/template.tsx; Next.js remounts it when navigating between routes that share the template.
When to use it
Per-page state
A feedback form should start with fresh local state on each page.
Repeated loading feedback
A nested Suspense boundary should display its fallback on every navigation.
Interview questions
QHow do you define an App Router template, and where is it rendered?
Create a template.tsx file and export a default React component that accepts children. Next.js renders the template between the matching layout and its child page or layout.
Follow-up: Why choose a template instead of a layout? Choose it when navigation should remount the subtree, such as for per-page effects or state, or when the default framework behavior must change.
QHow does a template differ from a layout?
A layout persists across routes and keeps its state, whereas a template creates a fresh child instance during navigation. Consequently, the template's DOM is recreated, state is reset, and effects synchronize again.
Follow-up: What happens to a Suspense fallback in a template? The template's fallback can be shown on each navigation, rather than only when the layout initially loads.
QWhen would you use a template?
Templates are useful for behavior that should run again for each page, including effects such as page-view logging or state such as a per-page feedback form. They can also alter default framework behavior.
Follow-up: Can a template be client-side? Yes. It is a Server Component by default, but the use client directive can make it a Client Component.
Related
layout.jspage.jsloading.jsSuspenseuseEffectuseState