The App Router
The App Router uses folders and page.tsx files to define routes — no route configuration needed.
Syntax
app/dashboard/page.tsx → /dashboardThe App Router maps the app/ folder structure to URLs. To create a page, make a folder for the path and add a page.tsx that default-exports a React component.
The rule
- A folder = a URL segment.
- A page.tsx = the UI for that segment, and what makes it reachable.
So app/dashboard/settings/page.tsx is served at /dashboard/settings.
Example
// app/dashboard/page.tsx -> /dashboard
export default function Dashboard() {
return (
<main>
<h1>Dashboard</h1>
<p>Welcome back.</p>
</main>
);
}When to use it
- A developer adds an /about route by creating app/about/page.tsx with no changes to any config file.
- A team structures a multi-section site by creating one folder per top-level route under app/.
- A project migrates from Next.js Pages Router to App Router to access Server Components and streaming layouts.
More examples
Two routes from two folders
Each folder with a page.tsx becomes a distinct URL segment automatically.
app/
├── page.tsx # → /
├── about/
│ └── page.tsx # → /about
└── contact/
└── page.tsx # → /contactBasic page component
A page.tsx default export is the only requirement to render content at its matching URL.
// app/about/page.tsx
export default function AboutPage() {
return (
<section>
<h1>About Us</h1>
<p>We build great products.</p>
</section>
);
}Async page with fetch
App Router page components can be async, enabling direct server-side data fetching without useEffect.
// app/users/page.tsx
export default async function UsersPage() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await res.json();
return <ul>{users.map((u: any) => <li key={u.id}>{u.name}</li>)}</ul>;
}
Discussion