File Routing

## 1. Learning Objectives By the end of this lesson, you will be able to: - Map folder structures to URLs. - Create static, dynamic, catch-all, and optional catch-all routes. - Use route groups to organize code without changing the URL. - Read route params in App Router pages. Difficulty: Beginner. ## 2. Prerequisites - App Router basics. - URL path fundamentals. - TypeScript object basics. ## 3. Overview File routing means your filesystem is your route configuration. In the App Router, folders define URL segments and special files like `page.tsx` define what renders for that URL. ## 4. Why This Topic Matters Routing is the skeleton of a web app. Good file routing keeps URLs predictable, code easy to find, and navigation simple to maintain as a product grows. ## 5. Real-World Analogy File routing is like labeling drawers in a workshop. If the label says `products/[id]`, everyone knows where product detail logic belongs and what shape the URL will have. ## 6. Core Concepts | Pattern | Meaning | Example URL | |---|---|---| | `about/page.tsx` | Static route | `/about` | | `products/[id]/page.tsx` | Dynamic segment | `/products/42` | | `docs/[...slug]/page.tsx` | Catch-all route | `/docs/a/b/c` | | `docs/[[...slug]]/page.tsx` | Optional catch-all | `/docs` and `/docs/a` | | `(marketing)/about/page.tsx` | Route group | `/about` | ## 7. Syntax & API Reference

## 8. Visual Diagram

## 9. Live Example - Full Working Code

What just happened? A request to `/blog/react-server-components` passes `{ slug: "react-server-components" }` into the page. ## 10. Interactive Playground Try these route structures: - `app/pricing/page.tsx` - `app/users/[userId]/page.tsx` - `app/docs/[...slug]/page.tsx` Then visit the matching URLs and inspect the params. ## 11. Common Mistakes | Mistake | Why It Happens | Correct Approach | |---|---|---| | Using `[id].tsx` in App Router | This is a Pages Router habit. | Use `[id]/page.tsx`. | | Expecting route groups to appear in URLs | Parentheses are organizational only. | Use groups for code organization, not path segments. | | Forgetting catch-all params are arrays | Catch-all can match multiple path parts. | Type them as `string[]`. | ## 12. Best Practices - Keep route names user-facing and stable. - Use route groups for organization, not business logic. - Keep deeply nested routes intentional. - Use descriptive dynamic segment names like `[productId]`. - Generate static params for known content routes when possible. ## 13. Browser Compatibility | Feature | Browser Impact | Notes | |---|---|---| | Static routes | Server/framework feature | Browser receives normal HTML. | | Dynamic routes | Server/framework feature | URL works like any route. | | Catch-all routes | Server/framework feature | Useful for docs and CMS paths. | ## 14. Interview Questions **Easy:** What does `app/about/page.tsx` create? Answer: The `/about` route. **Medium:** What does `[id]` mean in a route folder? Answer: It is a dynamic segment that captures one part of the URL as a parameter. **Hard:** Why use route groups? Answer: They organize route trees, layouts, and teams without adding extra path segments to the public URL. ## 15. Debugging Exercise Broken structure:

Solution Use `app/products/[id]/page.tsx`. In the App Router, dynamic segments are folders and the page file sits inside them. ## 16. Practice Exercises - Easy: Build `/pricing`. - Medium: Build `/users/[userId]`. - Hard: Build `/docs/[[...slug]]` and render a breadcrumb from params. ## 17. Scenario-Based Challenge A documentation site needs `/docs`, `/docs/getting-started`, and `/docs/api/auth`. Which route pattern fits? Walkthrough Use `app/docs/[[...slug]]/page.tsx` so the route can match both the docs index and nested documentation paths. ## 18. Quick Quiz 1. What folder creates a dynamic segment? Answer: `[id]`. 2. What does `[...slug]` capture? Answer: One or more URL segments. 3. What does `[[...slug]]` capture? Answer: Zero or more URL segments. 4. Do route groups affect URLs? Answer: No. 5. What file renders UI for a route? Answer: `page.tsx`. ## 19. Summary & Key Takeaways - Folders define URL segments. - `page.tsx` exposes a route. - Dynamic params come from bracket folders. - Catch-all routes support nested unknown paths. - Route groups organize files without changing URLs. ## 20. Cheat Sheet | Need | Structure | |---|---| | `/about` | `app/about/page.tsx` | | `/products/42` | `app/products/[id]/page.tsx` | | `/docs/a/b` | `app/docs/[...slug]/page.tsx` | | `/docs` and `/docs/a` | `app/docs/[[...slug]]/page.tsx` | | Organization only | `app/(marketing)/page.tsx` | ## 21. Further Reading - Next.js Docs: Defining Routes. - Next.js Docs: Dynamic Routes. - Next.js Docs: Route Groups. ## 22. Next Lesson Preview Next, you will learn layouts: how shared UI wraps route segments, why layouts preserve state, and where global providers belong.