What problem does it solve? Building modern React applications with Next.js 13+ requires understanding the App Router paradigm shift: Server Components by default, file-based routing, streaming with Suspense, and new data fetching semantics. This Skill provides concrete patterns and code examples so you avoid common mistakes like overusing Client Components or mishandling server-side data fetching. ## Core Features & Use Cases - Server and Client Component Patterns: Guidance on when to use 'use client', how to compose server and client components, and how to minimize client-side JavaScript. - Routing and Layouts: File-based routing with dynamic segments, nested layouts, route groups, parallel routes, and route handlers for API endpoints. - Data Fetching and Streaming: Server-side fetching with cache controls and revalidation, plus progressive rendering using Suspense boundaries. - Use Case: When building a dashboard page that needs a persistent sidebar layout, server-fetched user data, and an interactive counter widget, this Skill shows exactly how to structure the app directory and split server/client responsibilities. ## Quick Start Ask the AI to scaffold a Next.js App Router page with a nested layout, server-side data fetching, and a Suspense-wrapped slow component.
