Templates

## 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 | Concept | Layout | Template | |---|---|---| | File name | `layout.tsx` | `template.tsx` | | Navigation behavior | Persists | Remounts | | State | Preserved | Reset | | Effects | Continue if component remains mounted | Rerun after remount | | Best for | App shells, sidebars, providers | Animations, 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Using templates for all shared UI | They look similar to layouts. | Use layouts unless you need remounting. | | Putting global providers in templates | Providers reset on navigation. | Put global providers in layouts. | | Expecting template state to persist | Templates 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 | Feature | Browser Impact | Notes | |---|---|---| | Template remounting | React behavior through Next.js | Works through framework navigation. | | Client effects in templates | Requires JavaScript | Only if the template is a Client Component. | | Server template wrapper | Server-rendered | No 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 | Need | Use | |---|---| | Persistent sidebar | `layout.tsx` | | Reset form UI each route | `template.tsx` | | Global provider | `layout.tsx` | | Page transition wrapper | `template.tsx` | | Durable app shell | `layout.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.