Agent skill · software engineering · wshobson
nextjs-app-router-patterns
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
Why this skill is useful
Provides advanced patterns and best practices for Next.js 14+ App Router that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-05. 38,570 stars on the source repository.
What this skill does
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 2. File Conventions Quick Start Detailed patterns and worked examples Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient. Best Practices Do's Start with Server Components - Add 'use client' only when needed Colocate data fetching - Fetch data where it's used Use Suspense boundaries - Enable streaming for slow data Leverage parallel routes - Independent loading states Use Server Actions - For mutations with progressive enhancement Don'ts Don't pass serializable data - Server → Client boundary limitations Don't use hooks in Server Components - No useState, useEffect Don't fetch in Client Components - Use Server Components or React Query Don't over-nest layouts - Each layout adds to the component tree Don't ignore loading states - Always provide loading.tsx or Suspense
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wshobson/nextjs-app-router-patterns