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
Install
PracticalSwan/agent-skills/nextjs-development · repository language: Python
git clone https://github.com/PracticalSwan/agent-skills
cp -r agent-skills/nextjs-development ~/.claude/skills/nextjs-developmentnpx skillfed install PracticalSwan/agent-skills/nextjs-developmentFrequently 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)
Read as markdown · JSON record · Browse the source repository
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