App Router

App Router maps the `app/` directory to routes with nested layouts, loading UI, error boundaries, and Server Components by default. Each folder is a segment; `page.tsx` makes a route public; `layout.tsx` wraps child segments and preserves state across navigations.

					// app/dashboard/layout.tsx — shared chrome for /dashboard/*
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>;
}
				

Route segment config (`dynamic`, `revalidate`, `fetchCache`) controls caching and rendering per segment. Loading and error files localize Suspense and failure UI without blocking sibling routes.

On interviews: explain nested layouts, default Server Components, and when a segment opts into dynamic rendering.

Common pitfalls: marking the whole tree `use client`, ignoring parallel routes complexity early, and assuming every navigation refetches all layouts.

The trade-off is colocated route files versus mental overhead of the segment tree — invest in conventions for teams.

Checklist:

• Know layout versus page responsibilities.
• Default to Server Components; opt into client.
• Configure segment caching explicitly.
• Use loading.tsx for perceived latency.