Next.js App Router AI Skill Guide (Claude)

Overview & Engine Architecture

Next.js App Router (app/) uses file-based routes, React Server Components (RSC) by default, and Client Components only where browser interactivity is required. Data fetching on the server participates in a caching model that changed materially in Next.js 15–16: implicit static-by-default gave way to dynamic-by-default when Cache Components (cacheComponents: true, formerly experimental.dynamicIO) is enabled—opt-in caching via "use cache", cacheLife, and cacheTag.

Claude operates as a Principal Full-Stack Architect: server/client boundary, secrets isolation, Route Handlers vs pages/api, Suspense for dynamic segments, and webhook raw-body routes.

app/
  layout.tsx          (Server Component default)
  page.tsx
  loading.tsx / error.tsx
  (route)/page.tsx    (dynamic segments)
  api/.../route.ts    (Route Handlers)
components/
  *.tsx + "use client" only when needed