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
The ui-design plugin is part of the wshobson/agents marketplace for Claude Code, providing specialized AI agents for UI/UX design assistance within development workflows.
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.
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.
Shell Scripting is a Claude Code plugin from the wshobson/agents marketplace that provides AI-powered assistance for writing and maintaining shell scripts.
An MLOps plugin from the wshobson/agents ecosystem providing Claude Code with specialized agents and skills for ML pipeline management, model deployment, experiment tracking, and production monitoring.
A Claude Code plugin with specialized AI agents for accessibility compliance auditing, WCAG standards verification, and remediation guidance in web and mobile applications.
The reverse-engineering plugin is part of the wshobson/agents marketplace for Claude Code, providing specialized AI agents for code analysis, binary examination, and system reverse engineering tasks.
A Claude Code plugin for CI/CD automation with 4 specialized skills covering pipeline design, GitHub Actions, GitLab CI, and secrets management, part of the wshobson/agents marketplace.
The functional-programming plugin is part of the wshobson/agents marketplace for Claude Code. It falls under the Languages category, which includes seven language-focused plugins covering Python, JavaScript/TypeScript, systems programming, JVM, sc...
Comprehensive Review is a Claude Code plugin from the wshobson/agents marketplace that provides multi-perspective code analysis covering architecture, security, and best practices.