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

★ 164 ⁮ 27 MIT updated 2026-07-14 by curiositech

Install

curiositech/some_claude_skills/nextjs-app-router-expert · repository language: TypeScript

Manual (git clone) CLI (skillfed)

git clone https://github.com/curiositech/some_claude_skills
cp -r some_claude_skills/.claude/skills/nextjs-app-router-expert ~/.claude/skills/nextjs-app-router-expert

npx skillfed install curiositech/some_claude_skills/nextjs-app-router-expert

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