nextjs-app-router-patterns
๐ฏSkillfrom wshobson/agents
|Agent skill for Next.js App Router patterns covering server/client components, file-based routing, layouts, data fetching, and caching strategies, part of the wshobson/agents collection with 146 skills.
Overview
nextjs-app-router-patterns is an agent skill from the wshobson/agents collection, a production-ready system of 73 focused plugins, 112 specialized AI agents, and 146 agent skills for Claude Code. This skill provides specialized knowledge for building applications with Next.js App Router, covering server components, client components, route handlers, layouts, loading states, and the modern data fetching patterns introduced in Next.js 13+ App Router architecture.
Key Features
- App Router architecture patterns: Covers the file-based routing system, nested layouts, route groups, parallel routes, and intercepting routes for modern Next.js applications
- Server and Client Component guidance: Provides clear rules for when to use Server Components vs Client Components, including the 'use client' directive and data fetching boundaries
- Data fetching and caching: Covers server-side data fetching patterns, React Server Components streaming, Suspense boundaries, and Next.js caching strategies
- Progressive disclosure: Loads App Router knowledge on demand following the three-tier architecture (metadata, instructions, resources) to minimize token usage in Claude Code sessions
Who is this for?
- Frontend developers building Next.js applications with App Router who want AI-assisted guidance on routing patterns and component architecture
- Teams migrating from Next.js Pages Router to App Router who need help understanding the new paradigms for data fetching, layouts, and server components
- Developers using Claude Code who want specialized Next.js App Router expertise without loading the entire wshobson/agents collection into context
Part of
wshobson-agents
Installation
npx vibeindex add wshobson/agents --skill nextjs-app-router-patternsnpx skills add wshobson/agents --skill nextjs-app-router-patterns~/.claude/skills/nextjs-app-router-patterns/SKILL.mdSKILL.md
More from this repository10
Comprehensive Claude Code plugin collection with 112 AI agents, 146 skills, and 73 focused plugins covering full-stack development, security, infrastructure, and multi-agent orchestration.
A specialized agent skill for advanced TypeScript type system patterns, part of the wshobson/agents plugin marketplace with 146 skills across 73 plugins for Claude Code.
Agent skill for Node.js backend development patterns including API design, architecture, and microservices, part of the wshobson/agents collection with 73 focused plugins and 146 skills for Claude Code.
Claude Code plugin for AI-powered framework migration workflows, coordinating specialized agents to plan and execute transitions between technology stacks as part of the wshobson/agents marketplace.
A Claude Code plugin for payment system integration covering Stripe, PayPal, and billing platforms with checkout flows, subscription management, and webhook handling in the wshobson/agents ecosystem.
A Claude Code plugin bundling core development tools and agents for everyday tasks like debugging and code generation, part of the wshobson/agents marketplace with 73 focused plugins.
Claude Code plugin for observability and monitoring including logging, metrics, distributed tracing, and alerting, part of the wshobson/agents marketplace with 73 focused plugins.
A Claude Code plugin providing specialized AI agents for deployment strategy planning and execution, covering blue-green deployments, canary releases, rolling updates, and zero-downtime patterns.
A Claude Code plugin for rapid API project scaffolding, part of the wshobson/agents marketplace with 73 focused plugins, 112 specialized agents, and 146 agent skills.
Claude Code plugin for JVM language development including Java, Kotlin, and Scala with specialized agents for idiomatic patterns, build tools, and runtime optimization in the wshobson/agents marketplace.