Layout

## 1. Learning Objectives By the end of this lesson, you will be able to: - Define root and nested layouts. - Explain how layouts wrap child routes. - Place navigation, sidebars, and providers in the right layout. - Decide when persistent layout state is useful. Difficulty: Beginner. ## 2. Prerequisites - App Router basics. - File routing basics. - React children prop. ## 3. Overview A layout is shared UI for a route segment and its children. In the App Router, `layout.tsx` receives `children`, wraps the active route, and persists across navigation within that segment. ## 4. Why This Topic Matters Layouts prevent repeated shell code and improve navigation performance. They also preserve state, which matters for sidebars, tabs, audio players, dashboards, and app frames that should not reset on every route change. ## 5. Real-World Analogy A layout is like the frame of a notebook. Every page changes, but the cover, binding, and page size stay consistent. Nested layouts are like sections with their own headers or dividers inside that same notebook. ## 6. Core Concepts | Concept | Meaning | |---|---| | Root layout | Required top-level layout that defines `` and ``. | | Nested layout | Segment-specific wrapper for child routes. | | `children` | The active child route content. | | Persistent state | Layout state remains when navigating between child pages. | | Providers | Context providers often live in a root or app-shell layout. | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? Both `/dashboard` and `/dashboard/settings` share the sidebar without duplicating it in each page. ## 10. Interactive Playground Try this: - Add a root layout with metadata and global styles. - Add a dashboard layout with a sidebar. - Navigate between child pages and notice the sidebar persists. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Forgetting root layout | App Router requires it. | Keep `app/layout.tsx` with `` and ``. | | Putting every provider in every page | Provider placement is unclear. | Put global providers in root layout or a provider component imported there. | | Expecting a layout to reset | Layouts persist by design. | Use `template.tsx` when reset behavior is required. | ## 12. Best Practices - Keep root layout global and boring. - Put product-specific shells in nested layouts. - Avoid fetching unrelated data in root layout. - Use layouts for persistent navigation, not page-specific content. - Keep interactive provider wrappers small and explicit. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Layout composition | Server/framework feature | Browser receives composed output. | | Persistent client state | Requires client components where state exists | Useful for nav and panels. | | Metadata in layouts | Server/framework feature | Helps document head output. | ## 14. Interview Questions **Easy:** What prop does a layout receive? Answer: `children`. **Medium:** Why do layouts preserve state? Answer: Next.js keeps matching layouts mounted while only the changing child segment updates. **Hard:** Where should authentication context providers live? Answer: Usually in a small Client Component provider imported into the root or protected app-shell layout, depending on how broadly the context is needed. ## 15. Debugging Exercise Broken layout:

Solution Root layout must return `` and ``, and it must render `children`. ## 16. Practice Exercises - Easy: Create a root layout with a page wrapper. - Medium: Create a dashboard layout with navigation. - Hard: Add a route group for marketing pages and give it a separate layout. ## 17. Scenario-Based Challenge An admin area has a sidebar, top bar, and account menu that should stay open while switching admin pages. Where should that UI live? Walkthrough Place it in `app/admin/layout.tsx`, render child pages through `children`, and keep only page-specific content in the nested `page.tsx` files. ## 18. Quick Quiz 1. What file defines a layout? Answer: `layout.tsx`. 2. Is root layout required? Answer: Yes. 3. Do layouts persist across child navigation? Answer: Yes. 4. What prop renders the active route? Answer: `children`. 5. Which file remounts on navigation instead? Answer: `template.tsx`. ## 19. Summary & Key Takeaways - Layouts wrap route segments and children. - Root layout defines the document shell. - Nested layouts create shared UI for route sections. - Layouts preserve state. - Use templates when remounting is required. ## 20. Cheat Sheet | Need | Place | |---|---| | Global HTML shell | `app/layout.tsx` | | Dashboard sidebar | `app/dashboard/layout.tsx` | | Auth provider | Root or protected layout provider wrapper | | Page-specific content | `page.tsx` | | Reset on navigation | `template.tsx` | ## 21. Further Reading - Next.js Docs: Layouts and Templates. - Next.js Docs: Pages and Layouts. - React Docs: Passing JSX as children. ## 22. Next Lesson Preview Next, you will learn templates, which look like layouts but intentionally remount when navigation occurs.