When would you use a Next.js layout instead of a template?

Connects layouts and templates to navigation, state lifetime, Effects, and deliberate remounting in the App Router.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

A layout wraps route segments and preserves its mounted UI and client state while users navigate between its children. A template has a similar shape, but Next.js gives it a new key for navigation, so its client subtree remounts, local state resets, and Effects run again. I use a layout for stable navigation, providers, and shells, and a template only when that reset is intentional.

Full answer below

Practice focus

App Router composition, state preservation, remount behavior, navigation, and ownership decisions.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
The important difference is not visual reuse; it is whether the shared subtree keeps its identity across child-route navigation.
A layout wraps route segments and preserves its mounted UI and client state while users navigate between its children. A template has a similar shape, but Next.js gives it a new key for navigation, so its client subtree remounts, local state resets, and Effects run again. I use a layout for stable navigation, providers, and shells, and a template only when that reset is intentional.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
For example, a dashboard sidebar, authenticated shell, or persistent player belongs in a layout because losing its state on every child navigation would feel broken. A template can fit a page-transition boundary, an analytics impression that must restart per navigation, or a form whose state must never carry into the next sibling route. I do not choose a template merely to rerun a fetch; Server Components and cache policy should own data freshness. I also place the boundary as low as possible so an intentional reset does not remount unrelated UI.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Describing layouts and templates as interchangeable shared wrappers.
Using a template to force data freshness instead of defining the data cache policy.
Placing a template too high and resetting unrelated providers or user work.

When would you use a Next.js layout instead of a template?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Related drill

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?