Next.js provides a sophisticated file-based routing systemwhere your folder structure directly defines your application's paths.
Next.js uses a file-system based router where folders are used to define routes.
Key logic: File = Route
Key logic: Folder = Route, page.js = UI
No built-in layout system. You manually wrap components in _app.js, making nested or per-route layouts difficult to manage.
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}Nested layouts are built-in features. Reusable UI like navbars and sidebars are persisted across child routes, improving performance through partial rendering.
Partial Rendering: Only the Page Content re-renders
| Feature | App Router | Pages Router |
|---|---|---|
| Routing Style | Folder-based | File-based |
| Layout | Built-in Nested Layouts | Manual setup |
| Rendering | Server Components (Default) | Client-side React |
| Data Fetching | Direct Fetch in Components | Special Async Hooks |
| Performance | Better (Streaming & Partial) | Moderate |
| Flexibility | High (Sub-route control) | Limited |
async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data.message}</div>;
}"use client";
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>
Count: {count}
</button>;
}/app/blog/[id]/page.js → Matches /blog/123
/dashboard/settings/profile hierarchy
(auth)/login → URL stays /login
loading.js → Automated skeleton states
error.js → Error boundaries per route
not-found.js → Custom 404 per section
Sends HTML in chunks rather than waiting for the entire page, resulting in significantly faster perceived loading times.