Next.js 16: What's New? Turbopack, React Compiler & Key Features

The Vercel team has kept its annual October tradition alive and just dropped Next.js 16. While previous versions like 13 and 14 were about introducing the new App Router and Server Actions, this release is all about performance, stability, and polish.

If you're a Next.js developer, this update is a big deal. It's not just new features; it's about making the entire development experience fundamentally faster.

Let's break down the biggest features, complete with code examples.

1. Turbopack is Now the Default Bundler ⚡

This is the headline feature. After years in beta, Turbopack is now stable and the default bundler for both next dev and next build.

Previously, you had to opt-in using the --turbo flag. Not anymore.

Why This Matters

Turbopack is a Rust-based bundler designed to replace Webpack. It's incrementally fast, meaning it only builds what's necessary. The Vercel team reports massive performance gains:

• Faster Local Server Startup: Near-instant next dev

• Blazing Fast Hot Module Replacement (HMR): Code changes appear in your browser almost instantly

• Faster Production Builds: next build is significantly quicker, speeding up your CI/CD pipelines

The "Code Example"

The best code example here is what you don't have to write. Your package.json file gets simpler.

Before (Next.js 15):

"scripts": {
  "dev": "next dev --turbo",
  "build": "next build"
}

After (Next.js 16):

"scripts": {
  "dev": "next dev",
  "build": "next build"
}

Just run the standard commands, and you get all the speed benefits out of the box.

2. The React Compiler is Stable and Ready 🤖

This is the other revolutionary feature. Next.js 16 includes support for the stable React Compiler.

This is the future of React. The compiler automatically optimizes your React components, which means you can write less code to get more performance. It's an opt-in feature for now, but it's a game-changer.

Why This Matters

The React Compiler solves one of React's biggest DX (Developer Experience) problems: manual memoization. You no longer need to litter your code with useMemo, useCallback, and React.memo to prevent unnecessary re-renders.

The compiler does it for you, automatically, and better than most humans can.

Example

First, you need to enable it in your next.config.js:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

Now, look at how your components change.

Before (Manual Memoization):

import { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [query, setQuery] = useState('');

  // We have to manually memoize this expensive operation
  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(query));
  }, [items, query]);

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      {/* ... render filteredItems ... */}
    </div>
  );
}

After (With React Compiler):

import { useState } from 'react';

// This is now a "React Compiler-optimized" component
function MyComponent({ items }) {
  const [query, setQuery] = useState('');

  // No more useMemo!
  // The compiler sees this is expensive and memoizes it automatically.
  const filteredItems = items.filter(item => item.name.includes(query));

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      {/* ... render filteredItems ... */}
    </div>
  );
}

3. A New Name: middleware.ts is now proxy.ts 🔁

This is a small change that brings a lot of clarity. The middleware.ts file has been renamed to proxy.ts.

Why This Matters

The term "middleware" was confusing. In frameworks like Express, middleware can end a request using res.send(). In Next.js, the file's primary job was always to intercept, rewrite, or redirect a request — behaving more like a proxy.

This new name makes its purpose crystal clear. The codemod npx @next/codemod@canary upgrade latest will even rename this file for you.

Example

The code inside is the same, just the filename is different.

File name: src/proxy.ts (or proxy.ts in your root)

// src/proxy.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function proxy(request: NextRequest) {
  // Example: Redirect all '/admin' requests to '/login' if not authenticated
  if (request.nextUrl.pathname.startsWith('/admin')) {
    const isAuthenticated = request.cookies.has('auth_token');

    if (!isAuthenticated) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  return NextResponse.next();
}

// The config matcher is the same as before
export const config = {
  matcher: ['/admin/:path*', '/dashboard/:path*'],
};

4. Breaking Change: Node.js 20.9+ is Required ⚠️

This is a critical update you can't ignore. Next.js 16 drops support for Node.js 18.

You must be running Node.js 20.9.0 or higher to use Next.js 16.

Why This Matters

Node.js 18 is reaching its End of Life. By moving to Node 20.9+, Next.js can leverage modern Node features, security updates, and performance improvements.

What to Do

Before you upgrade Next.js, check your Node version:

node -v

If you see v18.x.x, you must upgrade. If you're using Vercel, this will usually be handled for you, but for local development and other platforms like Netlify, AWS, or self-hosting, you'll need to update your environment.

How to Upgrade to Next.js 16

1. Upgrade Node.js

Upgrade Node.js to version 20.9.0 or later.

2. Run the Upgrade Codemod

This automatically updates your code, renames middleware.ts, and fixes other deprecations.

npx @next/codemod@canary upgrade latest

3. Install the Latest Dependencies

npm install next@latest react@latest react-dom@latest

Final Thoughts

Next.js 16 is focused on making modern React development faster and cleaner.

• 
  Turbopack by default makes your dev loop feel instant
  

• 
  The React Compiler simplifies your code and improves performance
  

• proxy.ts improves clarity across projects
  

• 
  Better stability and tooling make large applications easier to maintain
  

This release is less about flashy APIs and more about improving the real developer experience every single day.