nextjs-app-router

# Next.js App Router (Next.js 16+) Build modern React applications using Next.js 16+ with App Router architecture. ## Overview This skill provides patterns for Server Components (default) and Client Components ("use client"), Server Actions for mutations and form handling, Route Handlers for API endpoints, explicit caching with "use cache" directive, parallel and intercepting routes, and Next.js 16 async APIs and proxy.ts. ## When to Use Activate when user requests involve: - "Create a Next.js 16 project", "Set up App Router" - "Server Component", "Client Component", "use client" - "Server Action", "form submission", "mutation" - "Route Handler", "API endpoint", "route.ts" - "use cache", "cacheLife", "cacheTag", "revalidation" - "parallel routes", "`@`slot", "intercepting routes" - "proxy.ts", "migrate from middleware.ts" - "layout.tsx", "page.tsx", "loading.tsx", "error.tsx", "not-found.tsx" - "generateMetadata", "next/image", "next/font" ## Quick Reference | File | Purpose | Directive | Purpose | |------|---------|-----------|---------| | `page.tsx` | Route page | `"use server"` | Server Action function | | `layout.tsx` | Shared layout | `"use client"` | Client Component boundary | | `loading.tsx` | Suspense loading | `"use cache"` | Explicit caching (Next.js 16) | | `error.tsx` | Error boundary | | | | `not-found.tsx` | 404 page | | | | `route.ts` | API Route Handler | | | | `proxy.ts` | Routing boundary | | | ## Instructions ### Create New Project ```bash npx cr...