Agent skill · software engineering · erichowens
nextjs-app-router-expert
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 strategies,
Why this skill is useful
Provides specialized knowledge on Next.js App Router patterns and data fetching strategies that the AI wouldn't reliably generate on its own.
What it needs
About 5k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
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 strategies, caching, streaming, and deployment optimization. When to Use Starting a new Next.js project with App Router Migrating from Pages Router to App Router Implementing complex routing patterns (parallel, intercepting routes) Optimizing data fetching with RSC and caching Setting up Server Actions for mutations Configuring middleware for auth/redirects Debugging hydration errors or RSC issues Deploying to Vercel, Cloudflare, or self-hosted Capabilities Routing Architecture File-based routing with app/ directory Dynamic routes ([slug], [...catchAll], [[...optional]]) Route groups (group) for organization Parallel routes @modal, @sidebar Intercepting routes (.), (..), (..)(..) Loading and error boundaries per route segment React Server Components Server vs Client component boundaries 'use client' directive placement Composition patterns (server wrapping client) Streaming with Suspense boundaries Progressive rendering strategies Data Fetching fetch() with automatic deduplication Caching strategies (force-cache, no-store, revalidate) generateStaticParams() for static generation Incremental Static Regeneration (ISR) On-demand revalidation with revalidatePath() / revalidateTag() Server Actions Form mutations with 'use server' Optimistic updates with useOptimistic Progressive enhancement (works without JS) Error handling and validation Redirect after mutation Middleware & Edge middleware.ts for auth, redirects, rewrites Edge Runtime vs Node.js Runtime Geolocation and conditional routing A/B testing and feature flags Performance Optimization Image optimization with next/image Font optimization with next/font Script loading strategies Bundle analysis and code splitting Partial prerendering (PPR) Dependencies Works well with: react-performance-optimizer - …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/nextjs-app-router-expert