ReviseAlgo Logo

Fundamentals

Layout

Learn how Next.js layouts create persistent shared UI, compose nested route shells, and host global providers.

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

    ConceptMeaning
    Root layoutRequired top-level layout that defines and .
    Nested layoutSegment-specific wrapper for child routes.
    childrenThe active child route content.
    Persistent stateLayout state remains when navigating between child pages.
    ProvidersContext 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

    MistakeWhy It HappensCorrect Approach
    Forgetting root layoutApp Router requires it.Keep app/layout.tsx with and .
    Putting every provider in every pageProvider placement is unclear.Put global providers in root layout or a provider component imported there.
    Expecting a layout to resetLayouts 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

    FeatureBrowser ImpactNotes
    Layout compositionServer/framework featureBrowser receives composed output.
    Persistent client stateRequires client components where state existsUseful for nav and panels.
    Metadata in layoutsServer/framework featureHelps 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

    NeedPlace
    Global HTML shellapp/layout.tsx
    Dashboard sidebarapp/dashboard/layout.tsx
    Auth providerRoot or protected layout provider wrapper
    Page-specific contentpage.tsx
    Reset on navigationtemplate.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.