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
Install
secondsky/claude-skills/nextjs · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/nextjs/skills/nextjs ~/.claude/skills/nextjsnpx skillfed install secondsky/claude-skills/nextjsFrequently 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)
Read as markdown · JSON record · Browse the source repository
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