Agent skill · software engineering · aiskillstore
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 practices for building Next.js applications that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-08-07. 405 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 Patterns Pattern 1: Server Components with Data Fetching Pattern 2: Client Components with 'use client' Pattern 3: Server Actions Pattern 4: Parallel Routes Pattern 5: Intercepting Routes (Modal Pattern) Pattern 6: Streaming with Suspense Pattern 7: Route Handlers (API Routes) Pattern 8: Metadata and SEO Caching Strategies Data Cache 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 Resources Next.js App Router Documentation Server Components RFC Vercel Templates
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/nextjs-app-router-patterns--6fdb60