Next.js App Router Patterns

Overview

Next.js App Router Patterns helps you leverage the full power of the App Router architecture. From Server Components to streaming and parallel routes, this skill generates idiomatic Next.js code that follows the latest recommended patterns.

Key Features

• Server Components: Generates components that correctly use the server-client boundary. Identifies which components should be Server Components (data fetching, no interactivity) and which need 'use client' (event handlers, state, effects).
• Route Architecture: Creates file-based route structures with proper layout nesting, loading states, error boundaries, and not-found handlers at each route segment.
• Server Actions: Generates secure Server Actions for form submissions and data mutations with Zod validation, proper error handling, and revalidation of affected paths.
• Streaming & Suspense: Implements streaming with Suspense boundaries to show UI progressively as data loads, with proper fallback components.

Data Fetching

The skill generates data fetching patterns using React cache(), proper fetch() configurations with revalidation strategies (time-based, on-demand), and parallel data fetching to avoid request waterfalls.

Deployment

Optimized configurations for Vercel, Cloudflare Pages, and self-hosted Node.js deployments. Includes proper output configurations, image optimization settings, and CDN cache headers.