nextjs-app-router

The nextjs-app-router skill provides patterns and code examples for building Next.js 16+ applications with App Router architecture, solving the problem of correctly adopting the App Router's server-first model and its newer conventions. It covers Server Components (the default), Client Components marked with "use client", Server Actions for mutations and forms, Route Handlers for API endpoints, explicit caching with the "use cache" directive, and advanced routing.

The skill includes a quick-reference table mapping App Router file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, route.ts, proxy.ts) and directives ("use server", "use client", "use cache") to their purposes. It demonstrates scaffolding a project with create-next-app, writing async Server Components that fetch data, adding interactivity with Client Components and hooks, defining Server Actions with "use server" and revalidatePath for form handling and database mutations, and configuring caching with cacheLife and cacheTag. It also addresses parallel routes (@slot), intercepting routes, Next.js 16 async APIs, and migrating from middleware.ts to proxy.ts. It ships eleven files including references for data fetching, routing patterns, server actions, caching strategies, metadata API, best practices, and a Next.js 16 migration guide, and declares safe allowed-tools (Read, Write, Edit, Bash).

It targets React and TypeScript developers building modern Next.js applications who need current App Router guidance, particularly those adopting Next.js 16 features or migrating existing projects. Use cases include new App Router projects, server-driven data fetching, form mutations via Server Actions, and explicit caching strategy design.