{"enrichment":{"faq":[{"a":"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.","q":"How to use Next.js 16 App Router for building full-stack applications?"},{"a":"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.","q":"What's the difference between Next.js server components and client components?"},{"a":"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.","q":"How does Next.js caching work with the use cache directive?"},{"a":"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.","q":"What are the key breaking changes when upgrading to Next.js 15+?"},{"a":"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.","q":"How can I debug rendering modes and performance with MCP devtools?"},{"a":"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.","q":"How do I implement Server Actions and forms in Next.js?"}],"shadow_tags":["full-stack-framework","react-meta-framework","server-side-rendering","static-generation","edge-computing","api-routes","type-safe-routing","bundle-optimization","dev-tooling"],"summary_rewrite":"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."},"files":[{"bytes":28289,"path":"nextjs-development/SKILL.md","sha256":"45bea0d4c25d98cdf1c93e23bf79bcde96f43d85d6c6a98b9d8c218760a951ab","url":"https://skillfed.io/files/PracticalSwan/agent-skills/nextjs-development/410a0a3f/SKILL.md"}],"id":"PracticalSwan/agent-skills/nextjs-development","links":{"html":"https://skillfed.io/PracticalSwan/agent-skills/nextjs-development","md":"https://skillfed.io/PracticalSwan/agent-skills/nextjs-development.md","repo":"https://github.com/PracticalSwan/agent-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":2,"language":"Python","last_updated":"2026-07-11","license":"MIT","name":"nextjs-development","publisher":"PracticalSwan","stars":6},"relations":{"similar":[{"id":"yonatangross/orchestkit/react-server-components-framework"},{"id":"shipshitdev/skills/nextjs-validator"},{"id":"laguagu/claude-code-nextjs-skills/cache-components"},{"id":"sangrokjung/claude-forge/cache-components"},{"id":"mohamed-hossam1/nextjs-skills/nextjs-cache-architecture"},{"id":"fernandofuc/nextjs-c-s/nextjs-16-complete-guide"},{"id":"sanity-io/next-sanity/next-cache-components"},{"id":"elophanto/EloPhanto/nextjs"},{"id":"vercel-labs/openreview/next-cache-components"},{"id":"charlietlamb/openlogs/next-cache-components"}]},"slug":{"owner":"PracticalSwan","repo":"agent-skills","skill":"nextjs-development"},"version":"410a0a3f"}