Nextjs App Router Patterns

The nextjs-app-router-patterns skill provides comprehensive guidance on building applications with Next.js 14+ App Router, covering Server Components, rendering modes, parallel routes, and modern full-stack React patterns. It's designed for developers building new Next.js applications, migrating from the Pages Router, or implementing advanced features like streaming and Server Actions. The skill solves the problem of understanding and correctly implementing Next.js's modern architecture by documenting file conventions, rendering strategies, and practical code patterns for optimized full-stack development.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 10
skills.sh installs: 33.6K
GitHub stars: 42.4K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wshobson/agents --skill nextjs-app-router-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

Next.js App Router Patterns

Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

When to Use This Skill

Building new Next.js applications with App Router
Migrating from Pages Router to App Router
Implementing Server Components and streaming
Setting up parallel and intercepting routes
Optimizing data fetching and caching
Building full-stack features with Server Actions

Core Concepts

1. Rendering Modes

Mode	Where	When to Use
Server Components	Server only	Data fetching, heavy computation, secrets
Client Components	Browser	Interactivity, hooks, browser APIs
Static	Build time	Content that rarely changes
Dynamic	Request time	Personalized or real-time data
Streaming	Progressive	Large pages, slow data sources