The App Router Gallery
Menu
Fundamentals
Nested Layouts
Loading
Error
Not Found
Metadata
Routing
Route Groups
Dynamic Routes
Parallel Routes
Intercepting Routes
Template
Middleware
Components
Image
Font
Script
Data & Forms
Route Handlers
Server Actions
Form
Revalidation
React 19
Rendering
Streaming
Static & ISR
PPR
Caching
Cached Routes
Cached Components
Cached Functions
Remote Cache
Private Cache
Advanced
useLinkStatus
View Transitions
Client Context
GitHub
The App Router Gallery
Explore 30 interactive demos covering Next.js 16 features.
Fundamentals
Nested Layouts
Create UI that is shared across routes
Loading
Create meaningful Loading UI for specific parts of an app
Error
Create Error UI for specific parts of an app
Not Found
Create Not Found UI for specific parts of an app
Metadata API
Define page metadata for SEO with static and dynamic patterns
Routing
Route Groups
Organize routes without affecting URL paths
Dynamic Routes
Create pages from dynamic data with [slug], [...slug], and [[...slug]]
Parallel Routes
Render multiple pages in the same layout
Intercepting Routes
Show routes in a different context like modals while preserving URLs
Template
Create UI that re-renders on navigation unlike layouts
Middleware
Run code before a request is completed for auth, redirects, and more
Components
Image Optimization
Automatic image optimization with next/image component
Font Optimization
Self-host fonts with automatic optimization using next/font
Script Component
Load third-party scripts efficiently with different loading strategies
Data & Forms
Route Handlers
Create API endpoints with Web Request and Response APIs
Server Actions
Mutate data with async functions that run on the server
Form Component
Enhanced form handling with progressive enhancement and client-side navigation
Data Revalidation
Refresh cached data with revalidatePath, revalidateTag, and time-based strategies
React 19 Hooks
Master new React 19 hooks: useActionState, useOptimistic, and use()
Rendering
Streaming
Progressive rendering with React Suspense for improved performance
Static Rendering & ISR
Pre-render pages at build time with incremental regeneration
Partial Prerendering
Combine static shell with dynamic holes for optimal performance
Caching
Cached Route Segments
Cache the rendered output of a route segment
Cached React Server Components
Cache the rendered output of an individual React Server Component
Cached Functions
Cache the computed result of a regular function
Remote Cache
Cache data at runtime with use cache: remote in dynamic contexts
Private Cache
Cache user-specific data with use cache: private using cookies and headers
Advanced
useLinkStatus
Create inline visual feedback for link interactions
View Transitions
Use animations to help users understand the relationship between the two views
Client Context
Pass context between Client Components that cross Server/Client Component boundary