ReviseAlgo Logo

Fundamentals

File Routing

Master file-based routing in Next.js, including static routes, dynamic segments, catch-all routes, and route groups.

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

    PatternMeaningExample URL
    about/page.tsxStatic route/about
    products/[id]/page.tsxDynamic segment/products/42
    docs/[...slug]/page.tsxCatch-all route/docs/a/b/c
    docs/[[...slug]]/page.tsxOptional catch-all/docs and /docs/a
    (marketing)/about/page.tsxRoute 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

    MistakeWhy It HappensCorrect Approach
    Using [id].tsx in App RouterThis is a Pages Router habit.Use [id]/page.tsx.
    Expecting route groups to appear in URLsParentheses are organizational only.Use groups for code organization, not path segments.
    Forgetting catch-all params are arraysCatch-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

    FeatureBrowser ImpactNotes
    Static routesServer/framework featureBrowser receives normal HTML.
    Dynamic routesServer/framework featureURL works like any route.
    Catch-all routesServer/framework featureUseful 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

    NeedStructure
    /aboutapp/about/page.tsx
    /products/42app/products/[id]/page.tsx
    /docs/a/bapp/docs/[...slug]/page.tsx
    /docs and /docs/aapp/docs/[[...slug]]/page.tsx
    Organization onlyapp/(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.