ReviseAlgo Logo

Fundamentals

Templates

Understand Next.js templates, how they differ from layouts, and when remounting route UI is the right behavior.

1. Learning Objectives

By the end of this lesson, you will be able to:

  • Explain what template.tsx does.
  • Compare templates with layouts.
  • Use templates for remounting, enter animations, and reset behavior.
  • Avoid using templates where persistent layouts are better.

    • Difficulty: Beginner.

    2. Prerequisites

  • App Router basics.
  • Layout basics.
  • React mounting and unmounting concepts.

    • 3. Overview

    A template is similar to a layout because it wraps child route content. The key difference is that a template creates a new instance for each navigation, so its state resets and effects rerun.

    4. Why This Topic Matters

    Most shared UI should use layouts, but some screens need fresh state on every navigation. Templates give you that reset behavior without forcing you to duplicate wrappers across pages.

    5. Real-World Analogy

    A layout is a reusable notebook cover that stays in place while you turn pages. A template is a fresh worksheet printed for each exercise: same structure, but a new copy every time.

    6. Core Concepts

    ConceptLayoutTemplate
    File namelayout.tsxtemplate.tsx
    Navigation behaviorPersistsRemounts
    StatePreservedReset
    EffectsContinue if component remains mountedRerun after remount
    Best forApp shells, sidebars, providersAnimations, reset forms, page view tracking

    7. Syntax & API Reference

    Templates receive children just like layouts, but Next.js gives each navigation a new component instance.

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Every navigation inside /account creates a fresh template instance, so the effect runs again.

    10. Interactive Playground

    Try this:

  • Add a layout.tsx with a counter and navigate between child pages.
  • Replace it with template.tsx.
  • Observe which version preserves state and which resets.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Using templates for all shared UIThey look similar to layouts.Use layouts unless you need remounting.
    Putting global providers in templatesProviders reset on navigation.Put global providers in layouts.
    Expecting template state to persistTemplates intentionally remount.Store persistent state above the template.

    12. Best Practices

  • Use templates sparingly.
  • Prefer layouts for navigation, shells, and providers.
  • Use templates for transition wrappers or reset-on-navigation forms.
  • Keep template logic small.
  • Document why remounting is required.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Template remountingReact behavior through Next.jsWorks through framework navigation.
    Client effects in templatesRequires JavaScriptOnly if the template is a Client Component.
    Server template wrapperServer-renderedNo browser-specific API required.

    14. Interview Questions

    Easy: What file defines a template?

    Answer: template.tsx.

    Medium: How is a template different from a layout?

    Answer: A layout persists across navigation, while a template remounts and resets state.

    Hard: Give a real use case for templates.

    Answer: A route section that needs enter animations or page-view effects to run on every navigation can use a template.

    15. Debugging Exercise

    Bug report: "My sidebar open state resets whenever I switch between account pages." The shared wrapper is in app/account/template.tsx.

    Solution

    Move the sidebar wrapper into app/account/layout.tsx. Templates remount and reset local state by design.

    16. Practice Exercises

  • Easy: Create app/account/template.tsx.
  • Medium: Add a Client Component effect that logs page views.
  • Hard: Compare state behavior between layout.tsx and template.tsx in the same segment.

    • 17. Scenario-Based Challenge

    A checkout flow needs a shared wrapper, but each step must reset temporary form hints and animation state. Layout or template?

    Walkthrough

    Use a template for the reset behavior. Keep durable checkout data in a parent store, URL state, server state, or layout-level provider if it must survive step navigation.

    18. Quick Quiz

    1. Do templates persist across navigation? Answer: No. 2. Do templates receive children? Answer: Yes. 3. Which preserves state: layout or template? Answer: Layout. 4. Which is better for global providers? Answer: Layout. 5. Which is useful for reset behavior? Answer: Template.

    19. Summary & Key Takeaways

  • Templates wrap route content like layouts.
  • Templates remount on navigation.
  • Remounting resets state and reruns effects.
  • Layouts are better for persistent shells.
  • Templates are best for reset behavior and transition wrappers.

    • 20. Cheat Sheet

    NeedUse
    Persistent sidebarlayout.tsx
    Reset form UI each routetemplate.tsx
    Global providerlayout.tsx
    Page transition wrappertemplate.tsx
    Durable app shelllayout.tsx

    21. Further Reading

  • Next.js Docs: Templates.
  • Next.js Docs: Layouts.
  • React Docs: Preserving and resetting state.

    • 22. Next Lesson Preview

    Chapter 1 is complete. Next, you will move into rendering strategies: CSR, SSR, SSG, ISR, and streaming.