Colocation in the App Router: Which Files Become Routes

Next.js colocation means placing a component, hook, or utility file directly inside a route's folder in the app directory, right next to the page that uses it. This works safely because only a specific set of file names actually becomes a route.

text

app/
  blog/
    page.tsx
    PostCard.tsx
    format-date.ts

page.tsx is the only file here that Next.js treats as routable. PostCard.tsx and format-date.ts sit in the exact same folder but never become URLs, because their names do not match a reserved convention.

The exact names that matter

A route becomes public and routable only when a folder contains one of a short list of reserved file names, matched exactly. Everything else, no matter what it contains or how it's organized, stays a private project file.

A component named page-header.tsx is safe, since it does not match page.tsx exactly. The match is on the full file name, not a substring.

Only rendered content reaches the browser

Colocating a file inside a route folder does not automatically send it to the client. Only the output a page or route file actually returns, including anything it imports and renders, reaches the browser.

App.tsx

// app/blog/page.tsx
import { PostCard } from "./PostCard";
 
export default function BlogPage() {
  return <PostCard title="Hello" />;
}

PostCard.tsx ships to the client here because the page imports and renders it. A colocated file the page never imports stays on disk and never reaches a visitor at all, whether or not it sits inside the route folder.

When to reach for extra structure

Plain colocation already keeps non-routing files safe, so private folders and route groups are optional extras rather than requirements. Reach for a private folder, covered in private folders and the underscore convention, when a naming collision with a future Next.js convention feels like a real risk. Reach for a route group instead, covered in route groups in Next.js, when the goal is separating sections of the app rather than hiding individual files from routing.

Common mistake

Naming a component file after a reserved convention by accident is the most common mistake, such as calling a loading spinner component loading.tsx inside a route folder. Next.js treats that name as the route's actual loading UI, not as a reusable component, which produces confusing behavior that has nothing to do with a typo in the code itself.

The safest habit is checking a new file's name against the reserved list before saving it inside a route folder, especially for common UI terms like loading, error, or template that also happen to be routing conventions. A quick rename to something like LoadingSpinner avoids the collision entirely while keeping the file exactly where it is most convenient to find.