NextPlayground
A hands-on playground for modern React and Next.js — hooks, rendering patterns, and UI building blocks, each with a live, minimal example.
React Hooks
useOptimistic
Show optimistic UI before the server responds.
useDeferredValue
Defer expensive re-renders to keep input snappy.
useActionState
Manage form state returned from server actions.
useTransition
Mark slow state updates as non-blocking.
useFormStatus
Read a parent form's pending state from a child.
useSyncExternalStore
Subscribe to external or browser stores safely.
Next.js & Rendering
Suspense Loading
Stream server content with Suspense boundaries.
Skeleton Loading
Show skeleton placeholders while data loads.
Dynamic Import
Lazy-load heavy components with next/dynamic.
Route Handlers
Build API endpoints with a route.ts file.
Error Boundaries
Catch render errors with an error.tsx boundary.