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.
Production-ready workflow orchestration with 72 focused plugins, 108 specialized agents, and 129 skills - optimized for granular installation and minimal token usage
A Claude Code plugin bundling core development agents and tools from the wshobson/agents marketplace, providing a foundational set of AI-assisted capabilities with minimal token usage.
The error-debugging plugin is part of the wshobson/agents marketplace for Claude Code, providing specialized AI agents for diagnosing and resolving software errors.
A Claude Code plugin from the wshobson/agents marketplace providing specialized error diagnosis and troubleshooting agents for root cause analysis, stack trace investigation, and fix recommendations across technology stacks.
git-pr-workflows is a Claude Code plugin from the wshobson/agents marketplace that provides specialized Git and pull request workflow automation.
A specialized AI agent plugin for modernizing legacy codebases using Claude Code. Part of a comprehensive system of 112 specialized agents, it automates the assessment and transformation of outdated code into modern architectures and patterns.
A Claude Code plugin from the wshobson/agents marketplace for deployment validation, providing specialized AI agents and tools to ensure reliable production deployments within a 73-plugin ecosystem.
The data-validation-suite plugin is part of the wshobson/agents marketplace for Claude Code. It falls under the Data category, which includes two data-focused plugins: data engineering and data validation.