Aurora Scharff

Rebuild React Router's global navigation state in Next.js, then look at what we gain and lose when the application owns the connection.

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.

Several changes can happen before the first save finishes.

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.

Active link styling is one of the most common things you need in a real application.

React Server Components let each component fetch the data it needs.

The Precompute pattern encodes request-specific data like auth state, locale, and feature flags into URLs to keep pages statically generated.

Next.js 16 introduces component-level caching with the 'use cache' directive, but it doesn't work seamlessly with next-intl yet.

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.

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.

Learn how to dynamically generate PWA app icons in Next.js 16 using Serwist.

Learn how to create a declarative combobox component using `useDeferredValue()` and `useSuspenseQuery()` for smooth, performant user experiences.

Learn how to compose client and server components effectively in React.

Learn how to build reusable components with React 19 Actions, track transition states, use optimistic updates, and expose action properties for custom logic.

Learn how to implement advanced search param filtering in the Next.js App Router, utilizing React 19 features like useOptimistic and the library nuqs.

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.

Feature flagging allows you to enable or disable features without deploying new code.

The React 19 `useFormStatus` hook is a powerful tool for handling form submissions.

Remix Contacts is Remix's official tutorial.

The React 19 hook useOptimistic is a powerful tool for building fast and responsive UIs.

React Hook Form is a popular library for building interactive forms in React.

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.