nextjs-app-router
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.
nextjs-app-router provides patterns for building Next.js 16+ applications with App Router, Server Components, and Server Actions.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-22
nextjs-app-router provides patterns for building Next.js 16+ applications with App Router, Server Components, and Server Actions. 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.
Use it when
- nextjs-app-router teaches you that Server Components (the default) run only on the server.
- nextjs-app-router covers Server Actions for handling form submissions and mutations with validation.
Verify before relying
Read SKILL.md below before installing (11 files). Open directory: indexed for reading, not audited.
Install
giuseppe-trisciuoglio/developer-kit/nextjs-app-router · 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 do I build a Next.js 16 App Router project?
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.
What's the difference between Server and Client Components in Next.js?
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.
How do I create a Server Action for form submission in Next.js?
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.
What is the 'use cache' directive and how does caching work in Next.js 16?
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.
How do I set up API endpoints with Route Handlers and dynamic segments?
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.
What are parallel and intercepting routes, and when should I use them?
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.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js App Router (Next.js 16+)
Build modern React applications using Next.js 16+ with App Router architecture.
Overview
This skill provides patterns for Server Components (default) and Client Components ("use client"), Server Actions for mutations and form handling, Route Handlers for API endpoints, explicit caching with "use cache" directive, parallel and intercepting routes, and Next.js 16 async APIs and proxy.ts.
When to Use
Activate when user requests involve: - "Create a Next.js 16 project", "Set up App Router" - "Server Component", "Client Component",
(truncated - see the full file via the links below)
File tree — 11 files
plugins/developer-kit-typescript/skills/nextjs-app-router/SKILL.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/app-router-fundamentals.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/best-practices.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/caching-strategies.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/data-fetching.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/examples.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/metadata-api.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/nextjs16-migration.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/patterns.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/routing-patterns.md
plugins/developer-kit-typescript/skills/nextjs-app-router/references/server-actions.md
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 a Next.js 16+ application using App Router with Server and Client Components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
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.
Master Next.js 16 App Router development with 45 rules spanning build optimization, caching strategy, server components, routing, and mutations. This skill guides you through critical patterns like explicit `'use cache'` directives, `revalidateTag` with cache profiles, and parallel data fetching, plus a category-major review algorithm for auditing single files or entire codebases. Uncover codebase-level issues—duplicated fetchers, dead routes, and `'use client'` propagation—that single-file rules miss.
This skill covers Next.js 16 App Router architecture, including file organization, Server Components as the default, Server Actions for mutations, and Route Handlers for API endpoints. Learn caching and revalidation patterns, proxy configuration, and Suspense-based streaming to build performant full-stack applications.
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.
Master Next.js 15+ development with App Router architecture, Server Components, and advanced patterns like Partial Prerendering. This skill covers file-based routing, Server Actions, caching strategies, and React 19 features to optimize performance and developer experience. Learn streaming, error boundaries, and production-ready patterns for modern web applications.
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-developer (MIT) · nextjs (MIT)