Pebellslearn by building
0%
RoadmapsMatrixCoursesSandboxSign in
Your First Next.js App  ›  Capstone Project

Routing Terminology

Routing Terminology 10 minNext.js describes routes as a tree of folders where each folder is a segment, the path is the chain of segments, and root and leaf mark the two ends.

Routing Terminology

The Next.js docs, error messages and your teammates all describe routes with a small set of words: tree, segment, path, root, leaf. They are borrowed from how we talk about family trees and file systems. Learn them once and every later lesson (layouts, loading screens, error boundaries) reads more easily, because each of those works "per segment".

The rule

The folders form a tree; each folder is a segment; the chain is the path.

Here is part of Trailhead's app folder, drawn as a tree:

app                   # root
├── page.tsx
├── about
│   └── page.tsx
└── trails
    ├── page.tsx
    └── [slug]
        ├── page.tsx
        └── photos
            └── page.tsx
  • Tree: the whole nested structure of folders. It mirrors the shape of your URLs.
  • Root: the top of the tree, the app folder itself. It matches /.
  • Segment: one folder, which is one piece of the URL between slashes. In /trails/misty-ridge/photos the segments are trails, misty-ridge and photos.
  • Dynamic segment: a bracketed folder like [slug], whose value changes per URL.
  • Path: the chain of segments from the root down to a point, written as the URL: /trails/misty-ridge/photos.
  • Parent and child: trails is the parent of [slug]; [slug] is a child of trails.
  • Subtree: a folder plus everything below it. The trails subtree covers /trails and every trail page.
  • Leaf: a folder with no child folders, at the end of a branch, such as about or photos.

Why it matters: many special files apply to a subtree. A layout.tsx in trails wraps every page in the trails subtree, and an error.tsx there catches errors from that segment and its children.

The shortcut

To name any part, walk the path one slash at a time from the root, saying "segment" at each folder. Anything below the folder you stopped at is its subtree; a folder with nothing below is a leaf.

Naming the parts of /trails/misty-ridge/photosStep 1 of 4
  1. Start at the root

    app, matching /.

The trap is thinking only leaves can hold pages. trails has a page.tsx and children below it. Any segment with a page file is visitable, leaf or not.

Drills

Answer fast — trust the rule.

quick drill

In /trails/misty-ridge, how many URL segments are there?

quick drill

Which folder is the root of the routing tree?

quick drill

A layout.tsx sits in app/trails. Which pages does it wrap?

quick drill

In the tree above, which folder is a leaf?

Remember

  • The folders form a tree; each folder is a segment; the chain from the root is the path.
  • Shortcut: walk the path slash by slash; below is the subtree, nothing below is a leaf.
  • Trap: pages are not limited to leaves; any segment with a page file is visitable.

Practice — level up

0/1 solved

Write your answer, then compare it with a rubric and a model answer.

ExplainName the parts

Using the URL /trails/misty-ridge/photos in Trailhead, explain what the tree, the root, a segment, the path and a leaf are, pointing at the matching folders in app.