LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 914 min read

File-based Routing

Learn the exact rules Next.js uses to turn folders and files inside app/ into working routes.

The Core Rule

Every URL path in a Next.js App Router project maps to a matching folder path inside app/, and that folder must contain a page.tsx file to be reachable. There is no route configuration file to maintain — the folder structure is the configuration.

app/page.tsx              →  /
app/contact/page.tsx      →  /contact
app/blog/page.tsx         →  /blog
app/blog/rss/page.tsx     →  /blog/rss

Nested Routes

Nesting folders creates nested URL paths. Each level can also have its own layout.tsx, loading.tsx, and error.tsx, which apply only to that segment and everything below it.

app/
└── dashboard/
    ├── layout.tsx        → wraps everything under /dashboard
    ├── page.tsx          → /dashboard
    └── settings/
        └── page.tsx      → /dashboard/settings

Route Folders vs Non-Route Folders

Not every folder under app/ needs to be a route. A folder without a page.tsx is simply not visitable — it's common to keep shared components or utilities in folders like app/_components or app/lib without them ever becoming URLs.

Private Folders

Prefixing a folder name with an underscore, like _components, tells Next.js to explicitly opt that folder (and everything inside it) out of routing — useful for colocating helper code without any chance of it becoming a route.

Common Beginner Mistakes

Naming a file route.tsx expecting a page

route.ts/route.tsx is reserved for API Route Handlers, not pages — use page.tsx for a visitable page.

Expecting file names other than page.tsx to become routes

Only page.tsx (or page.jsx) makes a folder visitable — a file named home.tsx inside a folder does nothing on its own.

FAQs

Yes, on most deployment platforms folder and URL casing matters, so keep folder names lowercase and consistent.

No — Next.js specifically looks for the file name page (with .tsx, .jsx, or .js), and that convention cannot be changed.

Summary

Folders define paths, and a page.tsx file is what makes a path visitable. Next, you'll look closer at how pages and layouts combine to build a full page.

Next Lesson →

Pages and Layouts