latest-nextjs

What this skill does

# Latest React & Next.js Skill

Comprehensive knowledge of React and Next.js features from mid-2024 through 2025. This skill fills the gap between LLM training cutoffs and current knowledge, covering **React 19.2** (October 2025), **Next.js 16** (October 2025), and supporting ecosystem changes.

## React 19.2 (Latest - October 2025)

### Current Status

- **Latest stable version**: React 19.2 (released October 1, 2025)
- **Previous updates**: React 19.1 (March 2025 - refinement release)
- **Initial release**: React 19 (December 2024)

### Key Improvements in 19.1-19.2

- No breaking changes from 19.0
- Performance optimizations
- Enhanced DevTools features
- 30-40% smaller JavaScript bundle sizes
- Faster TTFB (Time to First Byte)

## React 19 Core Features

### New Hooks

#### `useOptimistic`

Manages optimistic UI updates during async mutations:

```tsx
import { useOptimistic } from "react";

function LikeButton({ postId, initialLiked }) {
  const [optimisticLiked, addOptimistic] = useOptimistic(
    initialLiked,
    (state, newLiked) => !state
  );

  async function handleToggle() {
    addOptimistic(!optimisticLiked);
    await toggleLike(postId);
  }

  return (
    <button onClick={handleToggle}>
      {optimisticLiked ? "Unlike" : "Like"}
    </button>
  );
}
```

**Use cases**: Like buttons, todo lists, any UI showing predicted state during server updates.

#### `useActionState`

Connects forms to action functions and tracks response state:

```tsx
import { useActionState } from "react";

const [state, formAction, isPending] = useActionState(
  async (prevState, formData) => {
    const email = formData.get("email");
    await subscribe(email);
    return { success: true, message: "Subscribed!" };
  },
  null
);
```

**Replaces**: Manual form state management, loading states, error handling.

#### `useFormStatus`

Accesses parent form status from nested components:

```tsx
import { useFormStatus } from "react";

function SubmitButton() {
  const { pending, data, method, action } = useFormStatus();
  return (
    <button disabled={pending}>{pending ? "Sending..." : "Submit"}</button>
  );
}
```

**Key use case**: Submit buttons that need parent form state.

#### Enhanced `useTransition`

Now supports async functions with automatic state management:

```tsx
const [isPending, startTransition] = useTransition();

startTransition(async () => {
  // Automatic pending, error, and optimistic UI handling
  await searchAPI(query);
});
```

#### New `use` Hook

Reads resources (Promises, Context) in render:

```tsx
import { use } from "react";

// Read promises in Server Components
const data = use(fetchPromise);

// Read context
const theme = use(ThemeContext);
```

**Use case**: Streaming data in Server Components without useEffect.

### Server Components (Stable)

Production-ready and used at scale by Meta (Facebook, Instagram):

```tsx
// Server Component - runs on server only
async function BlogPost({ id }) {
  const post = await db.post.findUnique({ where: { id } });
  return <article>{post.content}</article>;
}
```

**Key characteristics:**

- Zero JavaScript bundled to client
- Direct database access
- Build-time or per-request rendering
- Next.js defaults to Server Components

### React Compiler (Stable Integration with Next.js 16)

Automatically optimizes components without manual memoization:

**Before:**

```tsx
const memoizedValue = useMemo(() => expensiveCalc(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
```

**With Compiler:**

```tsx
// Compiler automatically optimizes
const value = expensiveCalc(a, b);
const callback = () => doSomething(a, b);
```

**Capabilities:**

- Eliminates need for useMemo/useCallback in most cases
- Automatic re-render optimization
- Integrated and stable in Next.js 16

### Server Functions (formerly Server Actions)

Simplified server-side mutations:

```tsx
// app/actions.ts
"use server";

export async function updateProfile(formData: FormData) {
  const name = formData.get("name");
  await db.user.update({ where: { id }, data: { name } });
}

// Client Component usage
import { updateProfile } from "./actions";

export default function ProfileForm() {
  return (
    <form action={updateProfile}>
      <input name="name" />
      <button type="submit">Update</button>
    </form>
  );
}
```

### Simplified Forms

React 19 eliminates much of the complexity:

```tsx
// No more controlled state needed
export default function ContactForm() {
  return (
    <form
      action={async (formData) => {
        await submitToServer(formData);
      }}
    >
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}
```

### API Simplifications

#### Context Providers - No More `.Provider`

```tsx
// Before
<MyContext.Provider value={value}>{children}</MyContext.Provider>

// React 19+
<MyContext value={value}>{children}</MyContext>
```

#### Ref as Prop - No More `forwardRef`

```tsx
// Before
const Button = forwardRef((props, ref) => <button ref={ref} {...props} />);

// React 19+
const Button = ({ ref, ...props }) => <button ref={ref} {...props} />;
```

### Document Metadata Support

Place `<title>`, `<meta>`, `<link>` directly in components:

```tsx
function BlogPost({ title, description }) {
  return (
    <>
      <title>{title} | My Blog</title>
      <meta name="description" content={description} />
      <meta property="og:title" content={title} />
      <article>{content}</article>
    </>
  );
}
```

React automatically "hoists" these to `<head>`.

### Enhanced Ref Callbacks

Ref callbacks can now return cleanup functions:

```tsx
const buttonRef = useCallback((element: HTMLButtonElement | null) => {
  if (!element) return; // cleanup on unmount

  const handler = () => console.log("Clicked");
  element.addEventListener("click", handler);

  return () => element.removeEventListener("click", handler);
}, []);
```

### Improved Hydration

- Better handling of third-party script DOM mutations
- Enhanced error messages with detailed diffs
- Consolidated error logging

### New Error Callbacks

```tsx
createRoot(document.getElementById("root")!, {
  onCaughtError: (error, errorInfo) => {
    // Errors caught by Error Boundaries
    console.error("Caught:", error, errorInfo);
  },
  onUncaughtError: (error, errorInfo) => {
    // Errors NOT caught by Error Boundaries
    console.error("Uncaught:", error, errorInfo);
  },
});
```

### Custom Elements Support

Full support for Web Components with proper attribute and event handling.

## Next.js 16 (Released October 2025)

### Major Changes

#### Turbopack - Now Default & Stable

Turbopack is now the default bundler for both `next dev` and `next build`:

```bash
# Turbopack is now default - no flags needed
next dev
next build
```

**Performance improvements:**

- 5-10x faster Fast Refresh
- Significantly faster builds
- Production-ready stability

#### Cache Components (New Programming Model)

**Cache Components** replace Partial Prerendering (PPR) with a more explicit caching model:

```tsx
// next.config.js - Enable Cache Components
export default {
  cacheComponents: true, // Opt-in feature
};
```

**Key characteristics:**

- More explicit and flexible than implicit App Router caching
- Requires opt-in via config flag
- Component-level caching control
- Supersedes experimental PPR from Next.js 15

#### `proxy.ts` Replaces `middleware.ts`

Middleware has been renamed to **proxy**:

```tsx
// Before: middleware.ts
export function middleware(request: NextRequest) {
  // logic
}

// After: proxy.ts
export function proxy(request: NextRequest) {
  // Same logic, just renamed
}
```

**Migration:**

```bash
# Automated codemod available
npx @next/codemod@canary middleware-to-proxy
```

**What changed:**

- File renamed: `middleware.ts` → `proxy.ts`
- Export renamed: `middleware` → `proxy`
- Logic remains identical
- Runs on Node.js runtime

#### Async Route Parameters (Breaking Change)

Route paramet