Next.js App Router Mental Model

The App Router is easiest to understand as a tree of folders.

Pages render UI

page.tsx files define addressable routes.

Layouts preserve state

layout.tsx wraps children and stays mounted while navigating across nested routes.

Route handlers return data

route.ts files are useful for RSS, webhooks, tiny APIs, and generated text responses.

export function GET() {
  return Response.json({ ok: true });
}