The App Router Gallery

Create UI that is shared across routes

Create meaningful Loading UI for specific parts of an app

Create Error UI for specific parts of an app

Create Not Found UI for specific parts of an app

Define page metadata for SEO with static and dynamic patterns

Organize routes without affecting URL paths

Create pages from dynamic data with [slug], [...slug], and [[...slug]]

Render multiple pages in the same layout

Show routes in a different context like modals while preserving URLs

Create UI that re-renders on navigation unlike layouts

Run code before a request is completed for auth, redirects, and more

Automatic image optimization with next/image component

Self-host fonts with automatic optimization using next/font

Load third-party scripts efficiently with different loading strategies

Create API endpoints with Web Request and Response APIs

Mutate data with async functions that run on the server

Enhanced form handling with progressive enhancement and client-side navigation

Refresh cached data with revalidatePath, revalidateTag, and time-based strategies

Master new React 19 hooks: useActionState, useOptimistic, and use()

Progressive rendering with React Suspense for improved performance

Pre-render pages at build time with incremental regeneration

Combine static shell with dynamic holes for optimal performance

Cache the rendered output of a route segment

Cache the rendered output of an individual React Server Component

Cache the computed result of a regular function

Cache data at runtime with use cache: remote in dynamic contexts

Cache user-specific data with use cache: private using cookies and headers

Create inline visual feedback for link interactions

Use animations to help users understand the relationship between the two views

Pass context between Client Components that cross Server/Client Component boundary