Next.js App Router Patterns

Build Next.js applications using App Router best practices. Generates server components, server actions, route handlers, middleware, and data fetching patterns with proper caching and revalidation strategies.

This skill helps you leverage the full power of Next.js App Router. It generates server and client components with proper boundaries, implements server actions for mutations, configures caching strategies, builds middleware for auth and rewrites, and structures projects for optimal performance.

When to use

Use when building Next.js apps with App Router, migrating from Pages Router, implementing authentication, setting up ISR/SSG patterns, or optimizing data fetching and caching.

Examples

Auth with middleware

Implement authentication using middleware and server components

Set up Next.js authentication with middleware-based route protection, server component user checks, and proper redirect handling

Optimized data fetching

Implement efficient data fetching with caching

Set up data fetching for a product page with ISR (revalidate every 60s), streaming for reviews, and parallel data requests