How does file-based routing work in the Next.js App Router?

Q: How does file-based routing work in the Next.js App Router?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First Think of a building where every room has a door number painted by the architect. In the App Router a folder is a corridor, but a corridor with no door is not an address: only a page file puts a door on it. You can store cleaning supplies (helpers, components) in any corridor without anyone being able to visit them, and you can put up a wing sign like "(marketing)" that tells staff how the building is organised without cha

The problem

Question presented to candidate: "Walk me through how a URL like /blog/my-post maps to files in the app directory. What happens to a helper file or a components folder that sits next to page.tsx?"

What a strong answer should cover:

Folders define URL segments; a route is public only when the folder contains a page file (or a route file for an API endpoint).
Other files in the folder (components, utils, styles) are colocated safely and never become routes.
Dynamic segments use brackets: [slug], catch-all [...slug], optional catch-all [[...slug]].
Route groups (name) organise folders without adding a URL segment; private folders _name opt out of routing entirely.
Special files in a segment (layout, loading, error, not-found) add UI around the page for that segment and below.

Clarifying questions expected:

"Is this App Router or Pages Router?" — in the Pages Router every file under pages/ is a route.
"Should shared layouts apply to a subset of pages?" — that is what route groups are for.

Code / implementation expected: Yes — a small app tree and the URLs it produces.

nextjs
routing
app-router
file-based

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

Think of a building where every room has a door number painted by the architect. In the App Router a folder is a corridor, but a corridor with no door is not an address: only a page file puts a door on it. You can store cleaning supplies (helpers, components) in any corridor without anyone being able to visit them, and you

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

An app tree and the URLs it produces

app/
  layout.tsx                  # root layout for every page
  page.tsx                    # /
  (marketing)/
    about/page.tsx            # /about          (group name dropped)
  blog/
    page.tsx                  # /blog
    [slug]/page.tsx           # /blog/one, /blog/two, ...
  dashboard/
    page.tsx                  # /dashboard
    util.ts                   # not a route
    _components/Widget.tsx    # not a route (private folder)
    nopage/Widget.tsx         # not a route (no page.tsx)
  api/health/route.ts         # /api/health  (GET, POST handlers)

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.