{"enrichment":{"faq":[{"a":"nextjs-app-router equips you with patterns for Next.js 16+ App Router development. Start by running `create-next-app` with the App Router option enabled. Structure your app using `app/layout.tsx` as the root layout and `app/page.tsx` as the home page. Use the `app` directory for all routes, pages, and layouts. Server Components are the default; mark interactive components with `'use client'` at the top. This skill covers the complete setup guide including file structure, configuration, and best practices for modern Next.js projects.","q":"How do I build a Next.js 16 App Router project?"},{"a":"nextjs-app-router teaches you that Server Components (the default) run only on the server, reducing bundle size and enabling direct database access. Client Components, marked with `'use client'`, run in the browser and support interactivity, hooks, and event listeners. Use Server Components for data fetching, sensitive operations, and static content. Use Client Components for forms, state management, and user interactions. This skill provides code examples showing when and how to use each pattern effectively in your App Router application.","q":"What's the difference between Server and Client Components in Next.js?"},{"a":"nextjs-app-router covers Server Actions for handling form submissions and mutations with validation. Define an async function marked with `'use server'` in a Server Component or separate file. Use it as the `action` prop on a `<form>` element. Validate input using libraries like Zod, then perform mutations (database writes, API calls). Server Actions automatically handle serialization and run securely on the server. This skill includes patterns for error handling, revalidation with `revalidatePath` or `revalidateTag`, and integrating validation frameworks for robust form handling.","q":"How do I create a Server Action for form submission in Next.js?"},{"a":"nextjs-app-router explains the `'use cache'` directive for configuring caching strategies in Next.js 16+. Mark functions or components with `'use cache'` to enable automatic caching of their results. Control cache duration and invalidation using `revalidatePath()` for path-based revalidation or `revalidateTag()` for tag-based revalidation. This skill teaches you how to combine these directives with Server Components and Server Actions to optimize performance, reduce database queries, and manage cache lifecycle effectively in your application.","q":"What is the 'use cache' directive and how does caching work in Next.js 16?"},{"a":"nextjs-app-router covers Route Handlers for creating API endpoints in the `app/api` directory. Create a `route.ts` file and export functions like `GET`, `POST`, `PUT`, or `DELETE`. Use dynamic segments with square brackets (e.g., `app/api/users/[id]/route.ts`) to handle parameterized requests. Access route parameters via the `params` object in your handler. This skill includes patterns for request validation, error handling, and integrating with databases or external services, enabling you to build RESTful APIs directly within your Next.js application.","q":"How do I set up API endpoints with Route Handlers and dynamic segments?"},{"a":"nextjs-app-router teaches advanced routing patterns: parallel routes use the `@slot` syntax to render multiple segments simultaneously (e.g., `@sidebar` and `@content`), enabling independent navigation and loading states. Intercepting routes use dot notation (e.g., `(..)folder/route`) to intercept and handle routes before they load, useful for modals or overlays. This skill provides tutorials and code examples for both patterns, helping you implement sophisticated UIs with complex navigation flows while maintaining clean file structure and independent data fetching for each route segment.","q":"What are parallel and intercepting routes, and when should I use them?"}],"shadow_tags":["react-server-components","form-handling","api-routes","cache-management","routing-architecture","async-patterns","performance-optimization","typescript-support","full-stack-framework","modern-react-patterns"],"summary_rewrite":"This skill equips you with patterns and code examples for Next.js 16+ App Router development, covering Server and Client Components, Server Actions for form handling, Route Handlers for APIs, and the new async APIs. Use it when setting up projects with App Router, configuring caching with the \"use cache\" directive, building parallel or intercepting routes, or migrating from middleware.ts to proxy.ts."},"files":[{"bytes":12266,"path":"plugins/developer-kit-typescript/skills/nextjs-app-router/SKILL.md","sha256":"678a88fb1f32913079ad4aea88f59ab6bbe5ba503cd2730a1bb8e2cf16f30391","url":"https://skillfed.io/files/giuseppe-trisciuoglio/developer-kit/nextjs-app-router/1ee7b516/SKILL.md"}],"id":"giuseppe-trisciuoglio/developer-kit/nextjs-app-router","links":{"html":"https://skillfed.io/giuseppe-trisciuoglio/developer-kit/nextjs-app-router","md":"https://skillfed.io/giuseppe-trisciuoglio/developer-kit/nextjs-app-router.md","repo":"https://github.com/giuseppe-trisciuoglio/developer-kit"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":37,"language":"Python","last_updated":"2026-06-22","license":"MIT","name":"nextjs-app-router","publisher":"giuseppe-trisciuoglio","stars":311},"relations":{"similar":[{"id":"yonatangross/orchestkit/react-server-components-framework"},{"id":"irahardianto/awesome-agv/nextjs-idioms"},{"id":"PracticalSwan/agent-skills/nextjs-development"},{"id":"organvm/a-i--skills/nextjs-fullstack-patterns"},{"id":"JosiahSiegel/claude-plugin-marketplace/nextjs-routing-advanced"},{"id":"pproenca/dot-skills/nextjs"},{"id":"prowler-cloud/prowler/nextjs-16"},{"id":"giuseppe-trisciuoglio/developer-kit/nextjs-data-fetching"},{"id":"laguagu/claude-code-nextjs-skills/nextjs-shadcn"},{"id":"JosiahSiegel/claude-plugin-marketplace/nextjs-caching"}]},"slug":{"owner":"giuseppe-trisciuoglio","repo":"developer-kit","skill":"nextjs-app-router"},"version":"1ee7b516"}