ReviseAlgo Logo

Fundamentals

App Router

Learn how the Next.js App Router maps folders to routes, composes layouts, and uses Server Components by default.

1. Learning Objectives

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

  • Explain how the App Router converts files into routes.
  • Use page.tsx, layout.tsx, loading.tsx, error.tsx, and route.ts.
  • Distinguish Server Components from Client Components.
  • Build nested routes without a central route config.

    • Difficulty: Beginner.

    2. Prerequisites

  • Introduction to Next.js.
  • React components.
  • Basic URL path structure.

    • 3. Overview

    The App Router is the modern Next.js routing system built around the app directory. Each folder is a route segment, and special files define pages, shared layouts, loading UI, error boundaries, and API endpoints.

    4. Why This Topic Matters

    The App Router is the default architecture for modern Next.js applications. It supports nested layouts, streaming, Server Components, server data fetching, and co-located route behavior, which makes large applications easier to organize.

    5. Real-World Analogy

    Think of the App Router like a building map. Folders are floors and rooms; layout.tsx is the hallway shared by rooms; page.tsx is the room itself; loading.tsx is the sign shown while the room is being prepared.

    6. Core Concepts

    FilePurpose
    page.tsxMakes a route publicly accessible.
    layout.tsxShared UI that wraps child routes and preserves state.
    template.tsxShared UI that remounts on navigation.
    loading.tsxSuspense fallback for a segment.
    error.tsxClient-side error boundary for a segment.
    not-found.tsxSegment-level 404 UI.
    route.tsHTTP endpoint for APIs and webhooks.

    7. Syntax & API Reference

    8. Visual Diagram

    9. Live Example - Full Working Code

    What just happened? Visiting /dashboard renders the root layout, then the dashboard layout, then the dashboard page.

    10. Interactive Playground

    Create a local App Router project and try:

  • Add app/dashboard/settings/page.tsx.
  • Add app/dashboard/loading.tsx.
  • Add a small Client Component inside a Server Component page.

    • 11. Common Mistakes

    MistakeWhy It HappensCorrect Approach
    Forgetting page.tsxA folder alone does not create a public route.Add page.tsx for routes users can visit.
    Putting stateful UI in a Server ComponentApp Router components are server-first.Move stateful parts into a child Client Component.
    Expecting layouts to remount on every navigationLayouts preserve state by design.Use template.tsx when remounting is needed.

    12. Best Practices

  • Keep route segments small and domain-oriented.
  • Use layouts for persistent navigation, shells, and providers.
  • Fetch data as close to the route as possible.
  • Keep Client Components near the interactive leaf of the tree.
  • Use route groups to organize code without changing URLs.

    • 13. Browser Compatibility

    FeatureBrowser ImpactNotes
    Server ComponentsServer-sideBrowser receives rendered output and client payload.
    Loading UIReact SuspenseSupported through framework rendering.
    Error boundariesClient-side reset UIerror.tsx must be a Client Component.

    14. Interview Questions

    Easy: What file makes an App Router route public?

    Answer: page.tsx.

    Medium: What is the difference between layout.tsx and template.tsx?

    Answer: A layout persists across navigation within its segment, while a template remounts when navigation happens.

    Hard: Why does the App Router make Server Components the default?

    Answer: Server Components reduce shipped JavaScript, allow server-side data access, improve first render, and keep sensitive logic out of the browser.

    15. Debugging Exercise

    Broken structure:

    Solution

    Rename index.tsx to page.tsx. The App Router uses special file names, not the Pages Router index convention.

    16. Practice Exercises

  • Easy: Create /dashboard.
  • Medium: Add /dashboard/settings with a shared dashboard layout.
  • Hard: Add loading and error UI for the dashboard segment.

    • 17. Scenario-Based Challenge

    A SaaS app needs /app/billing, /app/team, and /app/settings to share the same sidebar. How should you structure routes?

    Walkthrough

    Create app/app/layout.tsx for the shared shell and place billing/page.tsx, team/page.tsx, and settings/page.tsx inside that segment.

    18. Quick Quiz

    1. What is a route segment? Answer: A folder in the route tree. 2. What file defines loading UI? Answer: loading.tsx. 3. What file defines an HTTP endpoint? Answer: route.ts. 4. Do layouts preserve state? Answer: Yes. 5. What creates a route without affecting URL path? Answer: A route group.

    19. Summary & Key Takeaways

  • The App Router is folder-based.
  • page.tsx creates public routes.
  • Layouts wrap children and persist.
  • Server Components are default.
  • Special files co-locate route behavior with the route.

    • 20. Cheat Sheet

    NeedFile
    Public UI routepage.tsx
    Shared shelllayout.tsx
    Remounting shelltemplate.tsx
    Pending stateloading.tsx
    Segment error UIerror.tsx
    API endpointroute.ts

    21. Further Reading

  • Next.js Docs: App Router.
  • Next.js Docs: Routing fundamentals.
  • React Docs: Server Components.

    • 22. Next Lesson Preview

    Next, you will compare the App Router with the older Pages Router so you know how to read legacy codebases and plan migrations.