nextjs
Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.
nextjs skill handles Next.js 16 App Router patterns including async params, proxy.ts migration, and Server Components.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-25
nextjs skill handles Next.js 16 App Router patterns including async params, proxy.ts migration, and Server Components. Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.
Use it when
- Next.js Server Components run exclusively on the server, reducing client-side JavaScript and improving performance.
- The nextjs skill explains that 'use cache' is Next.js 16's new caching directive for marking functions and components as cacheable.
Verify before relying
Read SKILL.md below before installing (16 files). Open directory: indexed for reading, not audited.
Install
secondsky/claude-skills/nextjs · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What are the key breaking changes in Next.js 16?
Next.js 16 introduces several critical breaking changes: async params replaces static params in dynamic routes, middleware.ts migrates to proxy.ts for request interception, and parallel routes now require default.js files. The skill covers these migrations in detail, including how to update your codebase to handle async params properly and configure proxy.ts for request handling.
How do you use server components in Next.js?
Next.js Server Components run exclusively on the server, reducing client-side JavaScript and improving performance. They're the default in the App Router and can directly access databases and APIs. The nextjs skill teaches you to build server components for data fetching, combine them with Client Components for interactivity, and leverage React 19.2 features for seamless server-client integration.
What is the 'use cache' directive and how does it work?
The nextjs skill explains that 'use cache' is Next.js 16's new caching directive for marking functions and components as cacheable. It works alongside revalidation APIs to control cache lifetime and invalidation. You'll learn when to apply 'use cache', how to combine it with revalidatePath and revalidateTag, and strategies for cache management in Server Components and Server Actions.
How do you handle forms with Next.js server actions?
Next.js Server Actions allow you to define backend logic directly in your components using the 'use server' directive. The nextjs skill covers building form handlers that run server-side, managing validation and errors, and integrating with databases. You'll learn error handling patterns, progressive enhancement, and how Server Actions simplify form submission without API routes.
What is async params in Next.js 16 and why migrate?
Async params in Next.js 16 allows dynamic route parameters to be awaited, enabling direct database queries and async operations in route generation. The nextjs skill guides you through migrating from static params to async params, handling dynamic segments efficiently, and leveraging this pattern for better performance and cleaner code in the App Router.
How do you set up App Router layouts and streaming?
The nextjs skill teaches App Router layout structure for organizing nested routes and shared UI. Streaming with Suspense boundaries progressively renders content to users, improving perceived performance. You'll learn to create layout hierarchies, implement Suspense fallbacks, configure streaming responses, and combine layouts with Server Components for optimal user experience.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
name: nextjs description: "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." license: MIT metadata: version: 1.0.0 last_verified: 2025-11-21 nextjs_version: 16.0.3 react_version: 19.2.0 node_version: 20.9+ author: Claude Skills Maintainers repository: https://github.com/secondsky/claude-skills production_tested: true token_savings: 65-70% errors_prevented: 18+ keywords: - Next.js 16 - Next.js App Router - Next.js Pages Router - Server Components - React Server Components - Server Actions - Cache Components - use cache - Next.js 16 breaking changes - async params nextjs - proxy.ts migration - React 19.2 - Next.js metadata - Next.js SEO - generateMetadata - static generation - dynamic rendering - streaming SSR - Suspense - parallel routes - intercepting routes - route groups - Next.js middleware - Next.js API routes - Route Handlers - revalidatePath - revalidateTag - next/navigation - useSearchParams -
(truncated - see the full file via the links below)
File tree — 15 files
plugins/nextjs/skills/nextjs/SKILL.md
plugins/nextjs/skills/nextjs/references/caching-apis.md
plugins/nextjs/skills/nextjs/references/error-catalog.md
plugins/nextjs/skills/nextjs/references/next-16-migration-guide.md
plugins/nextjs/skills/nextjs/references/server-actions-patterns.md
plugins/nextjs/skills/nextjs/references/top-errors.md
plugins/nextjs/skills/nextjs/scripts/check-versions.sh
plugins/nextjs/skills/nextjs/templates/app-router-async-params.tsx
plugins/nextjs/skills/nextjs/templates/async-params-page.tsx
plugins/nextjs/skills/nextjs/templates/cache-component-use-cache.tsx
plugins/nextjs/skills/nextjs/templates/package.json
plugins/nextjs/skills/nextjs/templates/parallel-routes-with-default.tsx
plugins/nextjs/skills/nextjs/templates/proxy-migration.ts
plugins/nextjs/skills/nextjs/templates/route-handler-api.ts
plugins/nextjs/skills/nextjs/templates/server-action-form.tsx
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Migrate Next.js 15 to 16 with async params and proxy.ts”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill covers React Server Components patterns for Next.js 16+ applications, including App Router setup, component boundary design, and data fetching with the new cache components API. Learn Server Actions for mutations, streaming with Suspense, and React 19 patterns for building performant server-first apps. Includes migration guidance, best practices, and reference templates.
A comprehensive reference for Next.js 16 covering upgrade procedures, new features like Cache Components and DevTools MCP, and critical breaking changes. Includes Turbopack migration details, caching API signatures, and verification checklists for safe deployments.
A reference skill covering Next.js 16 essentials: upgrade procedures, new caching APIs with the `"use cache"` directive, Turbopack as the stable default bundler, and key breaking changes around async Request APIs. Includes links to official docs, release notes, and practical migration guidance for TypeScript projects.
Learn Next.js 16's transformative features: explicit caching with "use cache" directives, Turbopack as the stable default bundler delivering 2-5× faster builds, and the migration from middleware.ts to proxy.ts. Discover how React Compiler automates memoization and DevTools MCP enables AI-assisted debugging within your framework's context.
This skill covers Next.js 16 App Router architecture, including file organization, Server Components as the default, Server Actions for mutations, and Route Handlers for API endpoints. Learn caching and revalidation patterns, proxy configuration, and Suspense-based streaming to build performant full-stack applications.
This skill covers 21 rules for implementing Partial Prerendering in Next.js 16 App Router, guiding you through enabling cacheComponents, placing Suspense boundaries, caching with 'use cache', handling runtime APIs, composing pages with parallel streaming, and building forms with mutations. Each rule corrects a specific misconception about the dynamic-by-default rendering model and shows the canonical approach for mixing static chrome with personalized or real-time content.
More skills nextjs-developer (MIT) · nextjs (MIT) · nextjs-turbopack (MIT) · nextjs-app-router (MIT) · Next Cache Components (unlicensed) · nextjs-app-router-expert (MIT) · cache-components (MIT)