App Router

## 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 | File | Purpose | |---|---| | `page.tsx` | Makes a route publicly accessible. | | `layout.tsx` | Shared UI that wraps child routes and preserves state. | | `template.tsx` | Shared UI that remounts on navigation. | | `loading.tsx` | Suspense fallback for a segment. | | `error.tsx` | Client-side error boundary for a segment. | | `not-found.tsx` | Segment-level 404 UI. | | `route.ts` | HTTP 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 | Mistake | Why It Happens | Correct Approach | |---|---|---| | Forgetting `page.tsx` | A folder alone does not create a public route. | Add `page.tsx` for routes users can visit. | | Putting stateful UI in a Server Component | App Router components are server-first. | Move stateful parts into a child Client Component. | | Expecting layouts to remount on every navigation | Layouts 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 | Feature | Browser Impact | Notes | |---|---|---| | Server Components | Server-side | Browser receives rendered output and client payload. | | Loading UI | React Suspense | Supported through framework rendering. | | Error boundaries | Client-side reset UI | `error.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 | Need | File | |---|---| | Public UI route | `page.tsx` | | Shared shell | `layout.tsx` | | Remounting shell | `template.tsx` | | Pending state | `loading.tsx` | | Segment error UI | `error.tsx` | | API endpoint | `route.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.