What is the App Router?
Next.js introduced the App Router in version 13 as a new way to build React applications. It uses React Server Components by default, which means your pages can fetch data directly without client-side waterfalls.
File-based Routing
Every folder inside app/ becomes a route segment. A page.js file makes that route publicly accessible.
app/
├── page.js → /
├── about/
│ └── page.js → /about
└── articles/
└── page.js → /articles
Server Components vs Client Components
By default, all components in app/ are Server Components. They run on the server, can access databases and the filesystem, and send only HTML to the browser.
To use browser APIs or React hooks like useState, add 'use client' at the top of the file.
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Data Fetching
Server Components can be async functions. You can fetch data directly inside them:
export default async function ArticlesPage() {
const articles = await fetch('https://api.example.com/articles').then(r => r.json());
return (
<ul>
{articles.map(a => <li key={a.id}>{a.title}</li>)}
</ul>
);
}
No useEffect, no loading state, no client bundle overhead.
Conclusion
The App Router is a powerful shift in how React apps are built. Start with Server Components and only reach for 'use client' when you actually need interactivity.