Next.js App Router Explained: The Complete Beginner-Friendly Guide

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'.

// 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>
  );
}