Coordinating Optimistic Updates in Next.js
Learn how I combine useActionState and useOptimistic to keep rapid mutations responsive and ordered in Huddle and Flow.
Aurora Scharff
Working on developer experience, docs, and education on the Next.js team at Vercel. Practical guides on React, Next.js, and modern web development.
Latest posts
Experimenting with RSCs for Performance and UX in Next.js
A few Server Component patterns from a small app on the Next.js 16.3 preview: a load more button that leans on the URL, a search field that keeps focus while results stream, and a message composer that previews your draft on the server.
Building an Active NavLink Component in Next.js
Active link styling is one of the most common things you need in a real application. Here is how to build a reusable NavLink component for a Next.js app, taking inspiration from React Router, that handles Cache Components and flicker-free hydration.
Component Architecture for React Server Components
React Server Components let each component fetch the data it needs. Pages stop being giant loaders that prop-drill everything down. Here's how that changes how you architect a page, where loading boundaries live, and why it leads to better UX.
The Precompute Pattern: Encoding Dynamic Data into URLs in Next.js
The Precompute pattern encodes request-specific data like auth state, locale, and feature flags into URLs to keep pages statically generated. This post walks through how it works, where it shows up in production, and how it relates to cache components.
Implementing Next.js 16 'use cache' with next-intl Internationalization
Next.js 16 introduces component-level caching with the 'use cache' directive, but it doesn't work seamlessly with next-intl yet. Learn why and discover a practical workaround.
Error Handling in Next.js with catchError
react-error-boundary has issues with Server Components in Next.js. catchError is a framework-aware alternative that handles notFound(), redirect(), and server data re-fetching correctly.
Building Design Components with Action Props using Async React
Learn how to build reusable design components that expose action props and internally manage optimistic updates, loading states, and automatic rollback, so consumers just pass a value and an action.
Dynamically Generating PWA App Icons in Next.js 16 with Serwist
Learn how to dynamically generate PWA app icons in Next.js 16 using Serwist. This guide shows how to create environment-specific icons for development, staging, and production environments.
Building an Async Combobox with useSuspenseQuery() and useDeferredValue()
Learn how to create a declarative combobox component using `useDeferredValue()` and `useSuspenseQuery()` for smooth, performant user experiences.
Server and Client Component Composition in Practice
Learn how to compose client and server components effectively in React. Explore patterns for keeping responsibilities clear, optimizing performance, and creating reusable components.
Building Reusable Components with React 19 Actions
Learn how to build reusable components with React 19 Actions, track transition states, use optimistic updates, and expose action properties for custom logic.
Avoiding Server Component Waterfall Fetching with React 19 cache()
Learn how to use the React 19 cache() API in the Next.js App Router to optimize performance and avoid fetch waterfalls when using React Server Components.
Managing Advanced Search Param Filtering in the Next.js App Router
Learn how to implement advanced search param filtering in the Next.js App Router, utilizing React 19 features like useOptimistic and the library nuqs.
Handling Form Validation Errors and Resets with useActionState()
The React 19 `useActionState` hook is a powerful tool for creating a state based on the result of an action, typically useful with form submissions. Learn how to create a validated form using the hook, and how to handle form resets and errors with it.
Implementing Feature Flagging with the Next.js App Router
Feature flagging allows you to enable or disable features without deploying new code. Learn how to implement a simple feature flagging solution with the Next.js App Router.
Creating a Reusable SubmitButton with useFormStatus()
The React 19 `useFormStatus` hook is a powerful tool for handling form submissions. Learn how to create a reusable SubmitButton that works across multiple forms and enables progressive enhancement.
Rebuilding "Remix Contacts" in Next.js 14 with Transitions, Server Actions and Prisma
Remix Contacts is Remix's official tutorial. In this blog post, we'll rebuild it in Next.js 14 using React Server Components, Server Actions, Transitions and Prisma, and compare the two approaches.
Utilizing useOptimistic() Across the Component Tree in Next.js
The React 19 hook useOptimistic is a powerful tool for building fast and responsive UIs. Learn how to use useOptimistic across the component tree in Next.js with React Context.
Implementing React Hook Form with Next.js 14 and Server Actions
React Hook Form is a popular library for building interactive forms in React. Learn how to use React Hook Form with Next.js 14 and Server Actions.
Running Tests with RTL and Vitest on Async and Internationalized React Server Components in Next.js App Router
Learn a method for running tests with Vitest and RTL (React Testing Library) on React Server Components that utilizes internationalization (i18n) via the next-international package.