Folders Become Routes
Trailhead needs a trails list at /trails and an about page at /about. In many setups you would write a table of routes and keep it in sync with your files. In the Next.js App Router there is no table. The folders inside app are the table.
The rule
A folder names the URL; a
pagefile opens it to visitors.
Each folder inside app adds one segment to the URL. A folder only becomes a page someone can visit when it contains a page.tsx (or page.js) file that default-exports a component.
app/
page.tsx # /
trails/
page.tsx # /trails
trail-card.tsx # not a route
about/
page.tsx # /about
team/
page.tsx # /about/team// app/trails/page.tsx
export default function TrailsPage() {
return <h1>All trails</h1>;
}Because only special file names are routed, you can keep a component such as trail-card.tsx right next to the page that uses it. Visiting /trails/trail-card gives a 404.
Two folder-name tricks change the rule on purpose:
- Private folders start with an underscore, like
app/_components. Next.js ignores them for routing, which makes the intent obvious. - Route groups are wrapped in parentheses, like
app/(marketing)/about/page.tsx. The group organises files but adds nothing to the URL, so this is still/about.
Besides page, other special files you will meet include layout, loading, error, not-found and route. Each has one job in the folder it sits in.
The shortcut
To find the URL of any file, read the folder names from app down, skip (groups), and check for a page file at the end. No page file means no URL.
Start below app
The folders are
(marketing),about,team.
The trap is creating app/trails/index.tsx or app/trails.tsx out of habit from other tools. Neither makes a page in the App Router. It must be app/trails/page.tsx.
Drills
Answer fast — trust the rule.
Which file creates the page at /trails?
What happens when someone visits /trails/trail-card if app/trails/trail-card.tsx exists?
What URL does app/(shop)/gear/page.tsx serve?
You create app/about/team/ with only a team-photo.tsx inside. What is at /about/team?
Remember
- A folder names the URL segment; a
pagefile makes it visitable. - Shortcut: read folders from
appdown, skip(groups), require apagefile. - Trap:
index.tsxortrails.tsxdo not create pages in the App Router.