Lesson 66 of 81

File Colocation in the App Router

Q: A teammate is nervous about putting component files, test files, and stylesheets directly inside route folders under app/, worried they might accidentally become routes. Explain why this concern is mostly unfounded, and describe the one real scenario where you'd still reach for a private folder.

A strong answer covers: Explains that the router only matches a short, exact list of reserved filenames, not 'anything that looks like a component'; States that any non-reserved filename, at any depth, is structurally invisible to routing — this is the default, not an opt-out; Identifies that private folders (underscore prefix) exist for the case where a folder might later accumulate a reserved filename by accident; Gives a concrete scenario for that case: generated fixtures, a design-tool export, a copy-pasted example.

Most files you put inside a route folder are never at risk of becoming a route at all — the router only ever looks for a handful of exact names. Knowing that changes how confidently you colocate.

11 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

No quiz for this one — it's a practical topic

This topic is about judgment and practical tradeoffs more than a single right answer — a mock interview is the better way to test yourself on it.

Be interviewed on this →

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on File Colocation in the App Router

What interviewers actually ask about this, and what a strong answer has to cover.

A teammate is nervous about putting component files, test files, and stylesheets directly inside route folders under app/, worried they might accidentally become routes. Explain why this concern is mostly unfounded, and describe the one real scenario where you'd still reach for a private folder.

A strong answer covers

Explains that the router only matches a short, exact list of reserved filenames, not 'anything that looks like a component'
States that any non-reserved filename, at any depth, is structurally invisible to routing — this is the default, not an opt-out
Identifies that private folders (underscore prefix) exist for the case where a folder might later accumulate a reserved filename by accident
Gives a concrete scenario for that case: generated fixtures, a design-tool export, a copy-pasted example

Likely follow-ups

If someone renames a colocated component file to page.tsx by mistake, what actually happens to that route?
Does the underscore-prefix convention affect anything outside of Next.js's own router — your test runner's file discovery, for instance?
Is there a case where you'd move shared code out of app/ entirely instead of colocating it in a route folder? What's the deciding factor?

The plain-language idea

A reasonable first instinct coming into the App Router is caution: "if app/dashboard/ is a URL segment, is it safe to put a test file or a stylesheet in there too?" The answer is yes, by default, for a reason worth actually understanding rather than just trusting: the router isn't scanning a folder for "anything that looks like a component" and deciding what to do with it. It's checking for a short, exact list of reserved filenames — page, layout, loading, error, route, and a few others. A file named anything else, in any route folder, at any nesting depth, is structurally invisible to the router. Card.tsx, Card.test.tsx, Card.module.css, and useCardData.ts sitting right next to page.tsx don't need any special treatment to stay non-routable — they already are, just by not matching a reserved name.

So what is the underscore-prefixed private folder convention actually for, if plain colocation is already safe? It's a second, stronger layer for the narrower case where a folder, not just a file, needs to be guaranteed non-routable even if something reserved ends up nested inside it later. A _components/ folder that someone later drops a stray page.tsx into (a copy-pasted example, a generated file from a design tool export, an accidental rename) stays completely excluded from routing — underscore-prefixing isn't protecting the files you can see today, it's protecting against a reserved filename showing up inside that folder by accident, at any depth, without anyone changing the folder's own name.

See it in a real thing: colocating a component's full toolkit

app/dashboard/
├── page.tsx                     → the route
├── RevenueChart.tsx              → plain colocation — never a route, no underscore needed
├── RevenueChart.test.tsx         → same
├── RevenueChart.module.css       → same
├── useRevenueData.ts             → same
└── _fixtures/
    └── mock-data.json            → private folder — an extra guarantee nothing nested here routes

RevenueChart.tsx next to page.tsx works today for the same reason a typo'd Page.tsx (capital P) silently fails to become a route in the file-conventions lesson: the match is exact-string, not "looks like a component." _fixtures/ doesn't need that protection for the one mock-data.json file currently inside it — it's there so that whatever gets added to that folder next year, by someone who's never read this convention, still can't accidentally surface as a route.

What people usually miss

Watch out

Colocation safety is opt-in for routes, not opt-out for everything else. The router has to affirmatively recognize a reserved name to treat something as a route; there's no default-on behavior a stray file needs to be defended against.
A private folder's protection is recursive and depth-independent. _fixtures/nested/deeper/page.tsx is just as unreachable as _fixtures/page.tsx — the underscore on the top folder covers everything below it, no matter how many levels down.
Colocating tests next to the code they test doesn't change how the test runner finds them. This is purely about keeping the router from treating test files as routes — your test runner's own file-discovery glob pattern is a separate, unrelated configuration.
A .test.tsx or .module.css suffix carries no special meaning to the App Router at all. Those conventions exist for other tools (your test runner, your bundler's CSS Modules handling) — the router doesn't know or care about them; it's simply not looking for those names in the first place.
Moving shared, cross-route code out of app/ entirely (into a top-level components/ or lib/) is a separate, legitimate strategy — colocation inside a route folder is for things genuinely specific to that one route, not a replacement for a shared component library.

Why this matters in interviews

"Is it safe to put a Storybook story file or a Jest test right next to page.tsx in the same folder?" tests whether a candidate understands why the App Router's file conventions are safe to colocate around — "yes, because the router only matches a short exact list of reserved names" is a meaningfully stronger answer than "yes, I've just never seen it break," because it also correctly predicts the one case where it's worth reaching for a private folder instead of trusting plain colocation.