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
appfolder itself. It matches/. - Segment: one folder, which is one piece of the URL between slashes. In
/trails/misty-ridge/photosthe segments aretrails,misty-ridgeandphotos. - 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:
trailsis the parent of[slug];[slug]is a child oftrails. - Subtree: a folder plus everything below it. The
trailssubtree covers/trailsand every trail page. - Leaf: a folder with no child folders, at the end of a branch, such as
aboutorphotos.
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.
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.
In /trails/misty-ridge, how many URL segments are there?
Which folder is the root of the routing tree?
A layout.tsx sits in app/trails. Which pages does it wrap?
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.
