Describe template.js.
A template file is similar to a layout in that it wraps a layout or page. Unlike layouts that persist across routes and maintain state, templates are given a unique key, meaning children Client Components reset their state on navigation.
- 1
Features that rely on useEffect (e.g logging page views) and useState (e.g a per-page feedback form).
- 2
To change the default framework behavior. For example, Suspense Boundaries inside layouts only show the fallback the first time the Layout is loaded and not when switching pages. For templates, the fallback is shown on each navigation.
- 3
Template accepts children prop
Scenario Questions
- 1
Imagine you are building a multi-step onboarding flow in Next.js and you want a page transition animation to play every single time the user clicks 'Next' to go to the next route. If you put the animation wrapper in layout.js, it only plays on the first load. How would you solve this?
- 2
We have a sidebar with two tabs: 'Feedback' and 'Support', which are sibling routes. If a user starts typing a message in 'Feedback', switches to 'Support', and switches back, we want that form state to be completely wiped out. How would you structure your route files to ensure this state resets automatically without writing manual cleanup code?
- 1
We recently migrated our marketing site to the Next.js App Router. We noticed our page-view analytics tracking, which runs inside a useEffect on mount, isn't firing when users navigate between different blog posts under '/blog/[slug]'. The layout file wraps these pages. Why is this happening, and how would you resolve it without moving the analytics code into every single individual page file?
- 2
A developer on your team replaced all layout.js files with template.js because they wanted page transition animations everywhere. Now, users are complaining that the global search bar in the header loses its typed query and focus every time they click a link. What is causing this behavior, and how would you refactor the layout/template hierarchy to fix it?
- 1
We are building a highly interactive dashboard with complex exit/entry animations using Framer Motion. We need some shared context, like a sidebar collapse state, to persist across routes, but we also need the page content itself to unmount and remount to trigger exit animations. How would you architect the nesting of layout.js and template.js to achieve both persistent state and clean exit animations?
- 2
In a large-scale Next.js application, what are the performance implications of using a template.js versus a nested layout.js regarding React's concurrent rendering, Suspense boundaries, and DOM recreation when navigating between sibling routes? When would you actively advise against using a template?
- 1
Your organization is building a shared UI platform on top of Next.js for 50+ internal product teams. You need to enforce standardized page-load telemetry and entry animations across all micro-frontends. How would you design the layout and template architecture at the root level to ensure product teams don't accidentally break telemetry or state persistence when they define their own local layouts?
- 2
We are planning a migration of a legacy single-page app with heavy, stateful client-side routing to Next.js App Router. The legacy app relies on global state being completely torn down and rebuilt on certain route boundaries to prevent memory leaks from uncleaned event listeners. How would you leverage template.js as a migration bridge, and what is the long-term strategy to move them toward standard layouts?
Follow-up Questions
- ❓How does the rendering and DOM reconciliation process differ between layout.js and template.js during navigation?
- ❓If you nest both layout.js and template.js in the same route segment, which one wraps the other in the final React component tree?
- ❓How would you handle a scenario where you need route transition animations but still want to persist scroll position?