Scaleup Guide
Next.js App Router Explained: The Complete Beginner-Friendly Guide
Enquiry
Growth
BuildUXSEO
Next.jsApp RouterServer ComponentsReact
In this guide
A simple overview of Next.js App Router Explained: The Complete Beginner-Friendly Guide. Learn what it means, when it helps, and what to check first.
The App Router shifts the mental model from 'Pages' to 'File-System Based Routing' with Server Components by default.
Server vs Client Components
By default, everything in the app directory is a Server Component. This means zero bundle size for your libraries unless you explicitly add 'use client'.
tsx
// app/page.tsx (Server Component)
import { db } from "@/lib/db";
export default async function Page() {
const users = await db.user.findMany();
return (
<main>
{users.map(user => <div key={user.id}>{user.name}</div>)}
</main>
);
}