App Router (app/)

• File-system routing with layouts, nested routes, loading/error boundaries
• Supports React Server Components by default
• Better data fetching and streaming model

Server Components

• Render on server without shipping JS to client
• Direct DB/API access on server
• Reduced bundle size
• Better performance and SEO

Client Components ("use client")

• Interactive UI with hooks/events/browser APIs
• Only enabled where needed
• Helps minimize client-side JS

Layouts

• Shared UI across routes
• Persistent state/navigation
• Nested layout composition

Parallel Routes

• Multiple route segments rendered simultaneously
• Useful for dashboards/modals/split views

Intercepting Routes

• Overlay routes without full navigation
• Commonly used for modal navigation patterns

Streaming

• Send UI chunks progressively
• Faster perceived loading
• Works with Suspense

Suspense Integration

• Declarative async loading boundaries
• Smooth loading states
• Partial rendering support

Loading UI (loading.tsx)

• Automatic route-level loading states
• Works seamlessly with streaming

Error Handling (error.tsx)

• Route-segment error boundaries
• Granular recovery handling

Server Actions

• Server-side async functions callable from UI
• Simplifies mutations/forms
• Reduces API boilerplate

Built-in Data Fetching

• Native async components
• fetch() enhancement with caching/revalidation
• Simplified server-side fetching

Caching System

• Request memoization
• Data cache
• Full-route cache
• Router cache
• Fine-grained invalidation controls

Revalidation

• Time-based (revalidate)
• On-demand (revalidatePath, revalidateTag)
• Incremental content updates

Static Site Generation (SSG)

• Pre-render pages at build time
• Excellent performance
• CDN-friendly

Server-Side Rendering (SSR)

• Render per request
• Dynamic personalized content
• SEO-friendly

Incremental Static Regeneration (ISR)

• Hybrid static + dynamic rendering
• Update static pages without full rebuild

Dynamic Rendering Controls

• force-static
• force-dynamic
• dynamic = "auto"
• Explicit rendering behavior

Route Handlers

• API endpoints inside app/api
• Native Request/Response APIs
• Edge/runtime support

Middleware

• Run logic before request completion
• Auth, redirects, rewrites, localization
• Edge-executed

Edge Runtime

• Execute near users globally
• Low-latency request handling

Image Optimization (next/image)

• Automatic resizing/compression/lazy loading
• Responsive images
• Modern format support

Font Optimization (next/font)

• Self-hosted fonts automatically
• Eliminates layout shift
• Optimized loading

Metadata API

• Declarative SEO metadata
• OpenGraph/Twitter tags
• Dynamic metadata generation

Link Prefetching (next/link)

• Automatic route prefetching
• Faster navigation experience

Code Splitting

• Automatic per-route bundles
• Reduced initial JS payload

Dynamic Imports

• Lazy-load heavy components
• Client-only module loading

Turbopack

• Rust-based dev bundler
• Faster startup and HMR

Fast Refresh

• Instant UI updates during development
• Preserves component state

TypeScript Support

• Zero-config TypeScript setup
• Strong IDE integration

CSS Support

• CSS Modules
• Global CSS
• Sass support
• Tailwind integration

Built-in SEO Features

• SSR/SSG rendering
• Metadata API
• Sitemap/robots support

Internationalization (i18n)

• Locale-aware routing
• Multi-language support

Environment Variables

• Server/client environment separation
• Secure secret handling

Authentication Integration

• Works well with auth libraries
• Middleware-based auth flows
• Session/token strategies

Monorepo Support

• Good compatibility with Turborepo/pnpm workspaces

Deployment Optimization

• Deep integration with Vercel
• Edge deployment support
• Automatic scaling

Observability

• Logging hooks
• Instrumentation support
• Performance tracing

Partial Prerendering (PPR)

• Hybrid static + streamed dynamic content
• Experimental advanced rendering model

React Compiler Compatibility

• Future optimization compatibility
• Reduced manual memoization needs

Excellent React Ecosystem Integration

• Works with React Query, Zustand, Redux, Prisma, etc.
• Flexible architecture choices