Next.js 16 Skill

Next.js 16 introduces breaking changes including async request APIs and the new proxy.ts pattern. Request APIs now return promises instead of synchronous values, requiring await in route handlers, middleware, and server components. The proxy.ts file replaces manual proxy configuration, streamlining external service integration.

The "use cache" directive marks server components and functions for automatic caching, optimizing performance and reducing redundant data fetches. Apply it at the top of server components or async functions to enable persistent caching across requests, configurable with cacheLife for custom expiration windows.

Next.js 16 server actions support type-safe validation using Zod schemas. Define a Zod schema, parse incoming form or JSON data in your server action, and handle validation errors explicitly. This pattern ensures runtime safety and type consistency between client calls and server execution.

Yes, Next.js 16 is built on React 19 and fully supports its new patterns. You can use React 19 features like improved server components, automatic batching, and new hooks in your app router applications. The skill covers practical scenarios integrating React 19 with Next.js 16 routing and caching.

Migration requires updating async request APIs to use await, adopting the proxy.ts pattern for external routing, and implementing cache directives strategically. This skill identifies all necessary code changes, provides migration-ready examples, and explains explicit handling of async APIs and cacheLife configuration to ensure compatibility.

revalidateTag with cacheLife enables granular cache invalidation tied to custom expiration windows. Set cacheLife to define how long cached data persists, then use revalidateTag to manually purge specific cache entries before expiration, balancing automatic freshness with on-demand updates.