File-System Routing
Next.js App Router uses the directory structure to define URLs. A page.tsx file represents a publicly reachable page at the corresponding route.
For example, app/about/page.tsx maps to /about, while app/products/page.tsx maps to /products.
The important distinction is between folders and pages. A folder alone does not necessarily create a user-facing route. The route becomes renderable when the required special file exists.
Basic Routes
// app/page.tsx
export default function HomePage() {
return <h1>Home</h1>;
}
// app/about/page.tsx
export default function AboutPage() {
return <h1>About</h1>;
}💡 The two files produce
/ and /about respectively.Key Takeaways
- Folders represent URL segments.
- A
page.tsxfile makes a segment renderable as a page. - Route structure should reflect the information architecture of the application.