nextjs-app-routerlisted

Use when building or reviewing Next.js App Router applications. Covers Server vs Client Components, data fetching, Server Functions, Route Handlers, Cache Components, revalidation, routing, metadata, proxy.ts, error handling, streaming, and migration from the Pages Router. Verified against the official Next.js 16 App Router documentation.
LeahyCC/claude-skills · ★ 3 · Web & Frontend · score 67

Install: claude install-skill LeahyCC/claude-skills

# Next.js App Router Production guidance for Next.js 16 App Router applications. **Server-first:** keep rendering, data access, and secrets on the server; add `'use client'` only for interactivity. ## Architecture Overview ``` Request → proxy.ts → Route (layout/page) �� Server Components → DB/API │ │ │ ▼ │ RSC Payload + HTML │ │ ▼ ▼ Route Handlers Streaming + Suspense │ ▼ Client Components (hydrate) ``` ## Quick Reference | Need help with... | Resource | |-------------------|----------| | Server vs Client Components | [server-components.md](resources/server-components.md) | | Data fetching, Suspense, `use()` | [data-fetching.md](resources/data-fetching.md) | | Cache Components, revalidation | [caching.md](resources/caching.md) | | Layouts, navigation, dynamic routes | [routing.md](resources/routing.md) | | `proxy.ts`, auth gates | [proxy.md](resources/proxy.md) | | `error.tsx`, `loading.tsx`, `notFound()` | [error-handling.md](resources/error-handling.md) | | Metadata, App Router ownership | [metadata-and-seo.md](resources/metadata-and-seo.md) | | `next/image`, `next