Agent skill · software engineering · secondsky
nextjs
Next.js 16 with App Router, Server Components, Server Actions, Cache Components. Use for React 19.2 apps, SSR, or encountering async params, proxy.ts migration, use cache errors.
Why this skill is useful
Adds executable patterns and best practices for Next.js 16 App Router, including caching APIs and server components that are not widely documented.
What it needs
About 8k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
Next.js App Router - Production Patterns Version: Next.js 16.2.0 React Version: 19.2.0 Node.js: 20.9+ Last Verified: 2025-11-21 Table of Contents 1. When to Use This Skill 2. When NOT to Use This Skill 3. Next.js 16 Breaking Changes 4. Cache Components & Caching APIs 5. Server Components 6. Server Actions 7. Route Handlers 8. React 19.2 Features 9. Metadata API 10. Image & Font Optimization 11. Top 5 Critical Errors 12. Performance Patterns 13. TypeScript Configuration --- When to Use This Skill Use this skill when you need: Next.js 16 App Router patterns (layouts, loading, error boundaries, routing) Server Components best practices (data fetching, composition, streaming) Server Actions patterns (forms, mutations, revalidation, error handling) Cache Components with "use cache" directive (NEW in Next.js 16) New caching APIs: revalidateTag(), updateTag(), refresh() (Updated in Next.js 16) Migration from Next.js 15 to 16 (async params, proxy.ts, parallel routes) Route Handlers (API endpoints, webhooks, streaming responses) Proxy patterns (proxy.ts replaces middleware.ts in Next.js 16) Async route params (params, searchParams, cookies(), headers() now async) Parallel routes with default.js (breaking change in Next.js 16) React 19.2 features (View Transitions, useEffectEvent(), React Compiler) Metadata API (SEO, Open Graph, Twitter Cards, sitemaps) Image optimization (next/image with updated defaults in Next.js 16) Performance optimization (lazy loading, code splitting, PPR, ISR) When NOT to Use This Skill Do NOT use this skill for: Cloudflare Workers deployment → Use the cloudflare-nextjs skill (OpenNext adapter: @opennextjs/cloudflare, getCloudflareContext, caching tiers, Workers-specific errors). Note: cloudflare-nextjs covers the proxy.ts exception for Cloudflare (keep middleware.ts there). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/nextjs