Complete Next.js Route Symbols Guide: Master the Powerful App Router File-based Routing System

Next.js App Router introduces a flexible and powerful file-based routing system, where various bracket symbols work like different organizational tools, making project structure both clear and efficient. This article will help you quickly master their usage and applicable scenarios through professional explanations and vivid analogies.

1. () Route Groups (Group Segments)

Professional Explanation:
() is used to group page files, serving only as a project structure organization tool without affecting the final generated URL paths.

Vivid Analogy:
Like dividers in a drawer, helping you categorize and organize items, but outsiders can’t see these partitions.

Typical Scenario:
Place admin pages in an (admin) folder, while actual access paths remain /user, /settings, etc. The (admin) won’t appear in URLs.

app/
  (admin)/
    user/page.tsx       // Actual path /user
    settings/page.tsx   // Actual path /settings

2. [] Dynamic Route Parameters (Dynamic Segments)

Professional Explanation:
[] is used to define single-level dynamic parameters, capable of rendering different content based on different path segments.

Vivid Analogy:
Like labeled drawers, each label contains different content - accessing a specific label gets you the corresponding content.

Typical Scenario:
User detail page: user/[id]/page.tsx, when accessing /user/123, id equals 123.

app/
  user/
    [id]/page.tsx      // Matches /user/123, /user/abc

3. [...param] Multi-level Dynamic Parameters (Catch-all Segments)

Professional Explanation:
[...param] matches multi-level path parameters, suitable for situations with uncertain path depth.

Vivid Analogy:
Like an expandable drawer that can hold multi-level content, capturing all paths regardless of depth.

Typical Scenario:
Blog multi-level category pages: blog/[...slug]/page.tsx, can match /blog/a/b/c and other multi-level paths.

app/
  blog/
    [...slug]/page.tsx   // Matches /blog/a, /blog/a/b, /blog/a/b/c

4. [[...param]] Optional Multi-level Dynamic Parameters (Optional Catch-all Segments)

Professional Explanation:
[[...param]] can match 0 or more path segments, with optional parameters.

Vivid Analogy:
Like a detachable storage box - it works empty or full, flexibly accommodating various situations.

Typical Scenario:
Documentation pages: docs/[[...slug]]/page.tsx, can access both /docs and /docs/a/b.

app/
  docs/
    [[...slug]]/page.tsx   // Matches /docs, /docs/a, /docs/a/b

5. page.tsx Page Entry

Professional Explanation:
The page.tsx file under each route segment is the actual page entry, determining which page renders when users visit.

Vivid Analogy:
Like a house number, guiding users to find each room accurately.

Summary Comparison Table

Practical Application Recommendations

Best Practices

1. Reasonable use of route groups: Place related functional pages in the same group for easier maintenance
2. Dynamic route naming conventions: Use semantic parameter names like [userId] instead of [id]
3. Avoid over-nesting: Keep route structure simple, avoid overly deep nesting levels

Common Pitfalls

• Forgetting to add page.tsx files leading to 404 errors
• Confusing the use cases of [...param] and [[...param]]
• Route group naming conflicts with actual routes

By properly utilizing these “organizational tools”, your Next.js project structure will be clearer, and maintenance and expansion will be much more efficient. If you have more complex routing needs or want to see actual code examples, feel free to leave comments for discussion!