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.

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

nextjs-app-router-patterns