The App Router File System
How folders and special files inside app/ turn into real URLs, with no router configuration to write.
អាន 2 នាទី
Next.js uses file-system routing: the folder structure inside app/ is your route map. There's no routes.js file listing paths and components somewhere else — the location of a file determines the URL that renders it.
Folders map to URL segments
Each folder inside app/ becomes one segment of the URL. A file only becomes a visible page when you add a specially-named file inside that folder — a bare folder by itself doesn't create a route.
app/
├── page.tsx → /
├── about/
│ └── page.tsx → /about
└── blog/
├── page.tsx → /blog
└── first-post/
└── page.tsx → /blog/first-postThis means you can colocate other files — components, helper functions, styles — inside route folders without accidentally exposing them as pages. Only page.tsx (and a few other special filenames) are ever treated as routable.
page.tsx: what makes a route public
A folder becomes a real, navigable route the moment it contains a page.tsx that default-exports a component:
// app/about/page.tsx
export default function AboutPage() {
return (
<section>
<h1>About us</h1>
<p>We build developer tools.</p>
</section>
);
}Until that file exists, /about returns a 404 even if the about/ folder is there — the folder alone only reserves the URL segment, it doesn't render anything.
layout.tsx: shared UI that wraps pages
A layout.tsx file defines UI shared across a page and everything nested beneath it — a header, footer, or sidebar that shouldn't re-render on every navigation. Every layout must render its children:
// app/layout.tsx — the ROOT layout, required in every app
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<header>My Site</header>
{children}
<footer>© 2026</footer>
</body>
</html>
);
}The root layout is mandatory — it's the only place <html> and <body> are allowed to live, since every other page and layout renders inside it.
Other special files you'll meet soon
A handful of other filenames carry specific meaning inside a route folder, all covered in later lessons:
loading.tsx— instant loading UI while a segment renderserror.tsx— a boundary that catches errors thrown in that segmentnot-found.tsx— custom UI for a missing resourceroute.ts— an API endpoint instead of a page
None of this is configuration you write once and forget — it's a naming convention you'll use in nearly every folder you create. Get comfortable with it now, because the rest of the App Router — layouts, loading states, dynamic segments — is really just variations on "put a specially-named file in a folder."