The App Router is Next.js's modern system for building applications where every component is a Server Component by default.
Interactive Simulation Engine
App Router Hierarchy
Click nodes to inspect
Executable Code Workbench
page.tsx
Live Code Editor1// app/page.tsx - This is a SERVER COMPONENT by default
2export default async function Page() {
3 // You can fetch data directly here!
4 return <h1>Hello, Next.js!</h1>
5}
6
7// app/layout.tsx - This UI persists and DOES NOT re-render on navigation
8export default function Layout({ children }) {
9 return (
10 <html lang="en">
11 <body>{children}</body>
12 </html>
13 )
14}Mental Model
Think of the App Router as a unified tree where every folder is a URL segment, and components are 'Server-First'. You only 'opt-out' to the client when you need a browser-only feature.
Why This Exists
To provide a high-performance foundation. By making everything a Server Component initially, you minimize the JavaScript sent to the user while keeping the ease of React development.
Critical Note
"Many think Layouts re-render when you change pages. They don't! This is why state inside a Layout's Client Component is preserved during navigation."