Next.js SPA patterns
Runnable demos for the Single-Page Applications guide. Each route maps to one section of the guide. Open the network tab to watch initial data stream into the page. The source is on GitHub.
Native patterns
use() within a Context Provider
Hoist a fetch to a layout, pass the Promise unawaited through context, and unwrap it in a Client Component with use().
Rendering components only in the browser
Disable prerendering for a Client Component with next/dynamic and ssr: false.
Shallow routing on the client
Update the URL with pushState and read it back with useSearchParams, without a server round-trip.
Mutating data with Server Actions
A to-do list with add, toggle, edit, and delete, using a Server Action as an async reducer with useOptimistic.