nextjs-development
Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
Next.js Development provides patterns and verification protocols for building optimized full-stack applications with App Router and Server Components.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-11
Next.js Development provides patterns and verification protocols for building optimized full-stack applications with App Router and Server Components. Master full-stack Next.js 16+ development with App Router, Server Components, and TypeScript. This skill covers routing patterns, data fetching with the `use cache` directive, Server Actions, ISR/SSR/SSG strategies, Turbopack optimization, and MCP devtools integration for modern React 19+ architectures.
Use it when
- nextjs-development clarifies Server vs Client component boundaries in Next.js.
- nextjs-development covers modern caching patterns including the `use cache` directive for automatic request deduplication and response.
Verify before relying
Read SKILL.md below before installing (8 files). Open directory: indexed for reading, not audited.
Install
PracticalSwan/agent-skills/nextjs-development · repository language: Python
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
How to use Next.js 16 App Router for building full-stack applications?
nextjs-development teaches you to build full-stack Next.js 16+ applications using the App Router. You'll learn folder-based routing conventions, nested layouts, dynamic routes with `[param]` syntax, and how to organize your application structure. The skill covers creating pages, layouts, and route groups to manage complex application hierarchies efficiently with TypeScript support throughout.
What's the difference between Next.js server components and client components?
nextjs-development clarifies Server vs Client component boundaries in Next.js. Server Components run only on the server, reducing bundle size and enabling secure database access. Client Components run in the browser and handle interactivity. You'll learn when to use each, how to compose them together, and avoid common pitfalls like passing non-serializable props across the boundary.
How does Next.js caching work with the use cache directive?
nextjs-development covers modern caching patterns including the `use cache` directive for automatic request deduplication and response caching. You'll understand cache tags, revalidation strategies, and how to invalidate specific cache entries. The skill teaches ISR (Incremental Static Regeneration), SSR, and SSG approaches to optimize performance based on your data freshness requirements.
What are the key breaking changes when upgrading to Next.js 15+?
nextjs-development guides you through upgrading existing projects to Next.js 15+ with detailed coverage of breaking changes. You'll learn migration strategies, API deprecations, and how to adapt your codebase. The skill ensures smooth transitions while leveraging new features like improved Server Actions, enhanced Turbopack dev server performance, and React 19+ integration.
How can I debug rendering modes and performance with MCP devtools?
nextjs-development includes MCP devtools integration for debugging rendering modes and performance optimization. You'll learn to identify Server vs Client component rendering, trace data-fetching bottlenecks, and profile your application. The skill covers Turbopack dev server features, performance metrics, and techniques to optimize bundle size and runtime performance.
How do I implement Server Actions and forms in Next.js?
nextjs-development teaches Server Actions for handling form submissions and mutations securely on the server. You'll learn to create async functions marked with 'use server', bind them to forms, handle validation and errors, and revalidate data after mutations. The skill covers progressive enhancement, error boundaries, and Suspense integration for smooth user experiences.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js Development
> Optimized for Next.js 16+, React 19+, TypeScript 5.5+, Turbopack, and App Router-first architectures.
Comprehensive reference for Next.js (latest: 16.2.4) with the App Router, TypeScript, and modern patterns. Covers project structure, Server/Client Components, data fetching, caching with the use cache directive, Server Actions, MCP devtools integration, and performance optimization.
- Leverage native parallel subagent dispatch and 200k+ context windows where available.
Component Review Rubric Reference
Apply the shared Component Review Rubric before approving Next.js components, then run the Next.js-specific checks below.
Anti-Patterns
- Mixing server and client responsibilities: Bundle size, caching, and auth decisions
(truncated - see the full file via the links below)
File tree — 8 files
nextjs-development/CHANGELOG.md
nextjs-development/LICENSE.txt
nextjs-development/SKILL.md
nextjs-development/examples/data-fetching-patterns.md
nextjs-development/examples/server-client-components.md
nextjs-development/references/app-router-reference.md
nextjs-development/references/nextjs-mcp-server.md
nextjs-development/scripts/page-generator.ps1
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 › “Build and optimize full-stack Next.js applications with App Router”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
Nextjs Validator audits Next.js 16 projects to catch deprecated patterns from earlier versions and enforce current best practices. It checks package versions, routing structure, cache directives, server actions, and configuration format. Run it before development work or in CI/CD pipelines to keep projects aligned with Next.js 16 standards.
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.
Cache Components guides you through Next.js's compositional caching model for Server Components, replacing segment-level configuration with granular, code-based control. Learn when to apply 'use cache', configure cache lifetimes and tags, invalidate stale data, and balance static shells with dynamic streaming content for optimal performance.
Cache Components guides you through Next.js's compositional caching model, replacing segment-level configuration with granular, code-based cache control. Learn to apply the 'use cache' directive, manage cache lifetimes with cacheLife(), tag data for invalidation with cacheTag(), and architect static shells mixed with cached and dynamic content for optimal performance.
Structure caching from the start in Next.js 16+ App Router projects by building a tag registry, revalidation utilities, and data-fetching functions with "use cache" directives. This skill guides you through placing cache logic on data functions rather than pages, wiring mutations to invalidation, and organizing Suspense boundaries for partial prerendering. Includes templates for tags, revalidation handlers, and patterns for personalized content near cache boundaries.
More skills nextjs (MIT) · nextjs-app-router-expert (MIT) · nextjs-developer (MIT) · nextjs-app-router (MIT) · nextjs-turbopack (MIT) · nextjs-16 (Apache-2.0) · Nextjs16 Skills (unlicensed) · nextjs-developer (MIT)