nextjs-app-router-expert
This skill covers Next.js App Router architecture, including file-based routing, dynamic segments, parallel routes, and intercepting routes. Learn React Server Components, Server Actions for mutations, data fetching strategies with caching and ISR, middleware configuration, and performance optimization techniques. Ideal for building new projects or migrating from Pages Router.
Next.js App Router Expert guides you through building and migrating Next.js projects with App Router, React Server Components, and Server Actions.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-14
Next.js App Router Expert guides you through building and migrating Next.js projects with App Router, React Server Components, and Server Actions. This skill covers Next.js App Router architecture, including file-based routing, dynamic segments, parallel routes, and intercepting routes. Learn React Server Components, Server Actions for mutations, data fetching strategies with caching and ISR, middleware configuration, and performance optimization techniques. Ideal for building new projects or migrating from Pages Router.
Use it when
- nextjs-app-router-expert explains that App Router uses React Server Components by default.
- nextjs-app-router-expert covers advanced routing patterns: parallel routes use @folder syntax to render multiple segments simultaneously.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
curiositech/some_claude_skills/nextjs-app-router-expert · repository language: TypeScript
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 app router project from scratch?
nextjs-app-router-expert covers the complete foundation for building Next.js projects with App Router. Start by creating a new project with `create-next-app`, then organize your routes using the app directory's file-based structure. Place page.tsx files in route folders, use layout.tsx for shared UI, and leverage dynamic segments with [param] syntax. The skill guides you through RSC (React Server Components) by default, Server Actions for mutations, and middleware setup for authentication and request handling.
What's the difference between next.js 14 server components and pages router?
nextjs-app-router-expert explains that App Router uses React Server Components by default, enabling server-side data fetching directly in components without API routes. Pages Router relies on client-side fetching and getServerSideProps/getStaticProps. App Router offers parallel routes for simultaneous rendering, intercepting routes for modals, and route groups for organization—all unavailable in Pages Router. Migration involves moving files to the app directory and adopting Server Actions instead of API endpoints.
How do I implement parallel routes and intercepting routes in nextjs?
nextjs-app-router-expert covers advanced routing patterns: parallel routes use @folder syntax to render multiple segments simultaneously (ideal for dashboards), while intercepting routes use (.)convention to intercept sibling routes (perfect for modal patterns). Both live in the app directory alongside regular routes. Parallel routes enable independent loading states and error boundaries per segment. Intercepting routes let you show modals over existing content, then fall back gracefully when accessed directly.
How should I handle data fetching and caching in nextjs app router?
nextjs-app-router-expert teaches three strategies: fetch() with cache tags for revalidation, unstable_cache for expensive computations, and ISR (Incremental Static Regeneration) via revalidatePath/revalidateTag. Server Components fetch data server-side by default. Use 'force-cache' for static data, 'no-store' for dynamic content, and set revalidate seconds for ISR. Combine with Suspense boundaries and streaming to show partial UI while data loads, improving perceived performance.
What are Server Actions and how do I use them for form handling?
nextjs-app-router-expert covers Server Actions as async functions marked with 'use server' that run on the server and handle mutations securely. Use them in forms via the action prop instead of API routes. They support progressive enhancement, optimistic updates, and revalidation. Define them in Server Components or separate files, call them from Client Components, and handle errors with try-catch. They eliminate the need for separate API endpoints and reduce client-side JavaScript.
How do I debug hydration errors and RSC/client component boundaries?
nextjs-app-router-expert addresses hydration mismatches by ensuring Client Components ('use client') render identically on server and client. Common causes: date/time differences, browser APIs in Server Components, or conditional rendering based on client state. Use 'use client' sparingly at leaf components, not root layouts. Enable React strict mode to catch issues early. Check browser console for hydration warnings, verify no server-only code runs client-side, and use useEffect for client-only logic.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Next.js App Router Expert
Overview
Expert in Next.js 14/15 App Router architecture, React Server Components (RSC), Server Actions, and modern full-stack React development. Specializes in routing patterns, data fetching
(truncated - see the full file via the links below)
File tree — 1 file
.claude/skills/nextjs-app-router-expert/SKILL.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 or migrate a Next.js project using App Router with RSC”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
nextjs-developer is a specialist skill for architecting and implementing Next.js 14+ applications using the App Router and React Server Components. It guides you through routing structure, data fetching with caching, server actions for mutations, and deployment to Vercel, with built-in checks for performance and SEO compliance.
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 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.
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.
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.
Master Next.js 16's App Router with patterns for Server Components, Server Actions, and the new "use cache" directive. This skill covers critical breaking changes—async params, proxy.ts migration, and required default.js in parallel routes—plus caching APIs and React 19.2 features to optimize performance and prevent common errors.